我的项目2用Canvas写的一些图形

       在项目中，需要用Canvas画一些图形，和大家分享一下。

  由于需要常用到这些图形，就将图形封装成了一个一个的方法，在这里和大家分享一下这些方法吧！

用到的一些变量(有一些变量可能没写出来，大家看了就补一下吧)：<pre name="code" class="html">lineWidth="1";

<pre name="code" class="html">color="blue";

strokeStyle="red";

fillStyle="blue";

//绘制横线function drawhengxian(startPoint, l, color) {context.beginPath();context.moveTo(startPoint.x, startPoint.y);context.lineTo(startPoint.x + l, startPoint.y);context.lineWidth = lineWidth;context.strokeStyle = color;context.stroke();}

//绘制折线function drawZheXian(points) {// 绘制折现context.beginPath();context.moveTo(points[0].x, points[0].y);for (var i = 1; i < points.length; i++) {context.lineTo(points[i].x, points[i].y);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//绘制竖线function drawshuxian(starPoint, l) {context.beginPath();context.moveTo(starPoint.x, starPoint.y);context.lineTo(starPoint.x, starPoint.y - l);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//绘制空心圆function drawEmptyArc(center, radius) {context.beginPath();context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);context.fillStyle = fillStyle;context.fill();context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//绘制实心三角形（即有颜色填充的三角形）function drawshendanshu(points, colors) {// 绘制折现context.beginPath();context.moveTo(points[0].x, points[0].y);for (var i = 1; i < points.length; i++) {context.lineTo(points[i].x, points[i].y);}//结束绘制context.closePath();// 进行绘图处理context.fillStyle = colors;// 填充路径context.fill();}//绘制雪花图案function drawCha(center, l) {context.beginPath();context.moveTo(center.x - l, center.y - l);context.lineTo(center.x + l, center.y + l);context.moveTo(center.x - l * 1.414, center.y);context.lineTo(center.x + l * 1.414, center.y);context.moveTo(center.x - l, center.y + l);context.lineTo(center.x + l, center.y - l);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//绘制电源（即三条长短不一的竖线） function drawsanshuxian(center, l, isAnode) {context.beginPath();if (isAnode) {context.moveTo(center.x - l, center.y - l * 3);context.lineTo(center.x - l, center.y + l * 3);context.moveTo(center.x, center.y - l * 2);context.lineTo(center.x, center.y + l * 2);context.moveTo(center.x + l, center.y + l);context.lineTo(center.x + l, center.y - l);} else {context.moveTo(center.x - l, center.y + l);context.lineTo(center.x - l, center.y - l);context.moveTo(center.x, center.y - l * 2);context.lineTo(center.x, center.y + l * 2);context.moveTo(center.x + l, center.y - l * 3);context.lineTo(center.x + l, center.y + l * 3);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}//绘制2个半圆function drawBanYuan2(center, l, isUp) {var radius = l / 4.0;var i;for (i = 0; i < 2; i++) {context.beginPath();if (i == 0) {context.arc(center.x + radius, center.y, radius, 0, Math.PI, isUp);} else {context.arc(center.x + 3 * radius, center.y, radius, 0, Math.PI, isUp);}context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}}//电阻线（好多小半圆组成，大家可以试一下）function drawXianQuan(startPoint, l) {

var r = l / 5;var potions1 = [];for (var i = 0; i < 5; i++) {var px = startPoint.x + i * r;var py = startPoint.y;potions1.push({x: px,y: py});}var potions2 = [];for (var i = 0; i < 5; i++) {var px = startPoint.x + i * r;var py = startPoint.y + l / 3;potions2.push({x: px,y: py});}context.beginPath();context.moveTo(startPoint.x, startPoint.y + l / 6);context.lineTo(startPoint.x + l, startPoint.y + l / 6);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();var radius = l / 10;for (var i = 0; i < potions1.length; i++) {context.beginPath();var isTop;if (i % 2 == 0) {isTop = true;} else {isTop = false;}context.arc(potions1[i].x + radius, potions1[i].y, radius, 0, Math.PI, isTop);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}for (var i = 0; i < potions2.length; i++) {context.beginPath();var isTop;if (i % 2 == 0) {isTop = true;} else {isTop = false;}context.arc(potions2[i].x + radius, potions2[i].y, radius, 0, Math.PI, isTop);context.lineWidth = lineWidth;context.strokeStyle = strokeStyle;context.stroke();}}//绘制实体圆function drawFillArc(center, radius) {context.beginPath();context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);context.fillStyle = "black";context.fill();}//绘制长方形function drawFillRect(x, y, a, b) {var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");cxt.strokeRect(x, y, a, b);}