Canvas 画圆

爱被打了一巴掌 2021-12-15 11:55 516阅读 0赞

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

-——————————————————————————————————————————————-

Canvas 画圆

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

语法

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

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

radius 描述弧的圆形的半径。

startAngle,

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

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

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

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

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

d50735fae6cd7b893b6730420f2442a7d8330ee3.jpg










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轴右方向的夹角，所以顺时针画出来的圆就是上面的效果

  1. 角度的表示：在我上面的代码中角度是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:

8435e5dde71190ef3feee61ece1b9d16fcfa60dd.jpg

Chrome:

b21c8701a18b87d6f351dfde070828381e30fde4.jpg

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

转载于:https://www.cnblogs.com/jcz1206/p/3540732.html

发表评论

表情：
评论列表 （有 0 条评论，516人围观）

还没有评论，来说两句吧...

相关阅读