在做项目时画曲线时主要用的就是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也可以完全画出一样的圆弧。
版权声明:本文为博主原创文章,未经博主允许不得转载。