Canvas 画圆

原文地址：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，其实说白了很简单，如下图：

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:

Chrome:

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