var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'red'}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'orange'}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'yellow'}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'green'}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'lightblue'}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'blue'}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'purple'} ] window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 800; canvas.height = 800; var context = canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } function draw( piece , ctx ){ ctx.beginPath(); ctx.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ ctx.lineTo(piece.p[i].x,piece.p[i].y); } ctx.closePath(); ctx.fillStyle = piece.color; ctx.fill(); ctx.strokeStyle = 'pink'; ctx.lineWidth = 3; ctx.stroke(); }

context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise=false)

绘制弧线。参数分别是，圆心的坐标x,y，圆的半径radius，开始的弧度值，结束的弧度值，顺时针转动/逆时针转动（false代表顺时针转动，true代表逆时针转动）。

弧度/角度。

无论顺时针/逆时针，弧度是不变的。

以下是顺时针的角度。

画3/4个圆。arc()也是状态设置。最后一个参数不填时，默认false，即顺时针。

context.lineWidth = 5; context.strokeStyle= 'blue'; context.arc(150,150,100,0,1.5*Math.PI); //圆心(150,150),半径100,从0弧度到1.5PI弧度。 context.stroke();

将最后一个参数设置为true时。

context.arc(150,150,100,0,1.5*Math.PI,true);

绘制多段弧。

context.lineWidth = 5; context.strokeStyle= 'blue'; for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath(); context.stroke(); }

问题：为什么弧的开始开始和结尾处被一条直线连接起来了？

答案：这是closePath()的另一个作用。当当前绘制的路径不是封闭路径时，使用了closePath()的话，就会自动将这段不封闭的路径在首尾处使用一条线连接。

以上代码不使用closePath()就不会首尾相连：

使用closePath()，并且逆时针方向绘制：

不使用closePath()，并且逆时针方向绘制：

填充处理。strokeStyle改为fillStyle。stroke()改为fill()。并且closePath()的效果：

去掉closePath()：

注意：closePath()对于fill()来说是不起作用的。当调用fill()时，无论你是否调用closePath()，会自动将不封闭的内容首尾相连再填充。

使用到的内容：

context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise=false)