标签：canvas arc画圆弧
在做项目时画曲线时主要用的就是arc()画圆弧的方法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
即：
arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)
其中最后一个参数是可选的，true=逆时针，false =顺时针
例：如果是画下面这样一个圆弧的话，其实代码可以这样写：
//第一段圆弧
cvt.beginPath();
//弧度 = 角度 * Math.PI/180
cvt.arc(270,115,176,-41*Math.PI/180,20*Math.PI/180,false); //顺时针 319与-41是一样的
cvt.strokeStyle = "#ff0000";
cvt.stroke();
由于是在起始角的上面开始向下画的，-41代表的就是从起始角的上面开始画的，因为是顺时针，所以就从负的角度开始画，然后度数一直在增大直到0度，然后再增大到20度，至此，一段圆弧画完。另外还有一层意思是319与-41是一样的，因为如果把这段圆弧的起始角定为319，那顺时针向下画时角度也是在增大的，直到360度，然后再从0度再增大到20度，也是可以画出一样的圆弧的。
再举一下逆时针的例子：如下图
上图所示需要的代码为：
//第二段圆弧
cvt.beginPath();
//弧度 = 角度 * Math.PI/180
cvt.arc(639,247,216,-160*Math.PI/180,-280*Math.PI/180,true); //逆时针 -160与200是一样的
cvt.strokeStyle = "#ff0000";
cvt.stroke();
其中圆弧的起始角为-160度，而这也与200度是一样的（360+（-160）= 200），因为是逆时针，所以角度是减小的，从-160到-280就画出了上图的圆弧。反之，从200到80也可以完全画出一样的圆弧。
版权声明：本文为博主原创文章，未经博主允许不得转载。
canvas的arc()方法详解
标签：canvas arc画圆弧
原文地址：http://blog.csdn.net/sunny327/article/details/47136109
