效果如图：

canvas绘制圆弧

系统默认在绘制第一个路径的开始点为beginPath

如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

所以说，如果第一个圆弧没有 closePath() 并且第二个圆弧没有 beginPath() 的话就是这样的效果：

canvas绘制矩形 绘制线段

moveTo(x,y) ：把路径移动到画布中的指定点，不创建线条

lineTo(x,y) ：添加一个新点，然后在画布中创建从该点到最后指定点的线条

每次画线都从 moveTo 的点到 lineTo 的点， context.strokeStyle = 'pink'; context.moveTo(0, 0); context.lineTo(100, 100); context.stroke();*/ 效果如下：

canvas绘制片段 如果没有 moveTo 那么第一次 lineTo 的效果和 moveTo 一样，
例如：

context.strokeStyle = 'pink'; context.lineTo(100, 100); context.lineTo(200, 200); context.stroke();*/

效果如下：

canvas绘制线段

每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点

例如：

// 绘制片段 context.strokeStyle = 'pink'; context.lineTo(200, 200); context.lineTo(200, 100); context.lineTo(100,50); context.stroke();

效果如下：

canvas绘制线段

我们可以使用 canvas 的线段绘制各种各样的图形，比如绘制一个六边形

var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = 'pink'; context.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 5; for (var i = 0; i < 6; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); console.log( x ,y ) } context.closePath(); context.fill(); context.stroke();

使用canvas绘制六边形

绘制 30 边形：

var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = 'pink'; context.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 7; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); console.log( x ,y ) } context.closePath(); context.fill(); context.stroke();

效果如下：

canvas绘制 30 边形 线性渐变

var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
lg.addColorStop(offset,color)

xstart:渐变开始点x坐标

ystart:渐变开始点y坐标

xEnd:渐变结束点x坐标

yEnd:渐变结束点y坐标

offset:设定的颜色离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

例如：

var g1 = context.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0, '#E55D87'); g1.addColorStop(1, '#5FC3E4'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300);

效果如下：

canvas绘制渐变 径向渐变

var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
rg.addColorStop(offset,color)

xStart：发散开始圆心x坐标

yStart：发散开始圆心y坐标

radiusStart：发散开始圆的半径

xEnd：发散结束圆心的x坐标

yEnd：发散结束圆心的y坐标

radiusEnd：发散结束圆的半径

offset：设定的颜色离渐变结束点的偏移量(0~1)

color：绘制时要使用的颜色

径向渐变原理

例如：

// 同心圆径向渐变 var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 200); g1.addColorStop(0.1, '#F09819'); g1.addColorStop(1, '#EDDE5D'); context.fillStyle = g1; context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.fill();

canvas绘制同心圆径向渐变 //不同圆心的径向渐变模型 var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 80); g1.addColorStop(0.1, '#F09819'); g1.addColorStop(0.8, 'red'); g1.addColorStop(1, '#EDDE5D'); context.fillStyle = g1; context.fillRect(0, 0, 300, 500);

效果图：

不同圆心径向渐变 图形变形 缩放