canvas绘制圆和弧(三)
利用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(),直接填充颜色,只是没有了边界
5. beginPath();closePath(); 使得路径首位相连
beginPath(): 标志开始一个路径
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.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();