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也可以完全画出一样的圆弧。