首页 > 其他 > 详细

canvas的arc()方法详解

时间:2015-07-30 00:52:21      阅读:554      评论:0      收藏:0      [点我收藏+]
在做项目时画曲线时主要用的就是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()方法详解

原文:http://blog.csdn.net/sunny327/article/details/47136109

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!