Canvas绘制圆

之前练习了一下绘制矩形顺便了解了一些Canvas经常用到的属性名。

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

现在来练练画圆。








Canvas绘制圆_第1张图片

画圆的方法:arc(x, y, radius, startRad, endRad, anticlockwise)

x:圆心x坐标

y:圆心y坐标

radius:圆的半径

startRad:初始弧度

endRad:结束弧度

anticlockwise:画圆的方向,true:逆时针   false:顺时针 默认是false

弧度:是以x轴正方向(即3点针方向),顺时针旋转的角度来计算的。

Canvas绘制圆_第2张图片

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

现在我们画个从3点到6点的圆。弧度就是0到(1/2)π,这是顺时针的情况。如果你想逆时针,那就是(1/2)π到0.

Canvas绘制圆_第3张图片

一开始很点看不懂这是什么鬼,为什么不是1/4的圆的形状。

蒙了一会儿,然后自己画了一下图就有点懂了

Canvas绘制圆_第4张图片

应该是这么一回事。它是起始点和结束点连成一条线,这条线和最外侧的弧线组成一个面。就形成了这么一个形状。

接着再理解一下那个弧度。

其实简单点说就是 起始弧度规定一个点,结束弧度规定了一个点,两个点连成直线。然后这两个点根据你的旋转方向形成弧线,直接和弧线组成一个面,就是所绘制的图形了。

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

理解了这些 ,画弧线就是简单了,在上面的例子上我们惊变一下,我们不填充图形,直接绘制边框即。


Canvas绘制圆_第5张图片

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

再绘制一个圆圈图形


Canvas绘制圆_第6张图片

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

PS:

如果大家忘记弧度是什么鬼,可以先百度一下弧度哈!

最后这些仅属于这人理解,仅供参考,大家还是根据自己的实际练习去理解理解吧


你可能感兴趣的:(HTML5+CSS3)