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:
不知道到底是什么原因,既然不知道原因,那么我们还是老老实实的使用弧度吧
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步