首页 > 其他 > 详细

Canvas 画圆

时间:2014-02-09 15:41:22      阅读:1170      评论:0      收藏:0      [点我收藏+]

原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b

----------------------------------------------------------------------------------------------

Canvas 画圆

W3School中对Canvas的画圆方法的描述如下:

语法

arc(x, y, radius, startAngle, endAngle, counterclockwise)

x, y                       描述弧的圆形的圆心的坐标。

radius                    描述弧的圆形的半径。

startAngle, 

endAngle               沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

                             沿着 X 轴正半轴的三点钟方向的角度为 0,角度沿着逆时针方向而增加。

counterclockwise   弧沿着圆周的逆时针方向(TRUE)还是顺时针方向(FALSE)遍历。描述

 

1. 我想很多人对startAngle和 endAngle两个参数不是很理解,我也是,经过摸索有了一点头绪,总结如下:

startAngle: 沿着 X 轴正半轴的三点钟方向的角度为 0,其实说白了很简单,如下图:

bubuko.com,布布扣

1
2
3
4
5
ctx.fillStyle=grd;
ctx.beginPath();
ctx.arc(150,50,50,0,Math.PI/2,false);
ctx.closePath();
ctx.fill();

这个图片的0度角就是图中圆的半径与X轴右方向的夹角,所以顺时针画出来的圆就是上面的效果

 

2. 角度的表示:在我上面的代码中角度是Math.PI/2,初看可能不明白,其实仔细看一下就会想起来,这个是弧度,不明白就百度吧。

那么如果我按照角度写会如何呢?

1
2
3
4
ctx.beginPath();
ctx.arc(150,50,50,0,360,true);
ctx.closePath();
ctx.fill();

分别打开IE9,FF,Chrome看一下,奇怪的事情发生了:

IE9 和FF:

bubuko.com,布布扣

Chrome:

bubuko.com,布布扣

不知道到底是什么原因,既然不知道原因,那么我们还是老老实实的使用弧度吧

Canvas 画圆

原文:http://www.cnblogs.com/jcz1206/p/3540732.html

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