标签：
利用context的方法，进行圆和弧的绘制
context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);
x，y:表示圆心坐标
radius：圆的半径
startingAngle：绘制圆弧的起始位置（弧度制，比如0，0.5*Math.PI.....）
endingAngle:绘制圆弧的终止位置
anticlockwise：false和true，true表示逆时针，false表示顺时针。不写默认false
和绘制直线一样，你可以把绘制圆看成是直线的绘制，只是这个直线比较特殊，是有弧度的直线
1.如图绘制圆心（0,10）半径100，从0π到0.5π顺时针绘制一段圆弧
context.strokeStyle=‘red‘; context.arc(0,10,100,0,0.5*Math.PI); context.stroke();
2.如图绘制圆心（110,110）半径100，从0π到0.5π逆时针绘制一段圆弧
context.strokeStyle=‘red‘; context.arc(110,110,100,0,0.5*Math.PI,true); context.stroke();
3.和绘制直线一样，.context.fill();默认会把首位相连，在填充上颜色
1 context.strokeStyle=‘black‘; 2 context.lineWidth=5; 3 context.arc(110,110,100,0,0.5*Math.PI,true); 4 context.fillStyle="red"; 5 context.fill(); 6 context.stroke();
4.可以不需要绘制context.stroke()，直接填充颜色，只是没有了边界
1 context.strokeStyle=‘black‘; 2 context.lineWidth=5; 3 context.beginPath(); 4 context.arc(110,110,100,0,0.5*Math.PI,true); 5 context.closePath(); 6 context.stroke();
6.closePath()可以不写，不影响状态的锁定，不过不会自动封闭线的两端了
1 context.strokeStyle=‘black‘; 2 context.lineWidth=5; 3 context.beginPath(); 4 context.arc(110,110,100,0,0.5*Math.PI,true); 5 //context.closePath(); 6 context.fillStyle="red"; 7 context.fill(); 8 context.stroke();
标签：
原文地址：http://www.cnblogs.com/Mangues/p/4310580.html
