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();

 

posted @ 2015-03-03 11:45  mangues  阅读(13288)  评论(0编辑  收藏  举报