Canvas绘制圆

来源：互联网发布：淘宝大屏的轮播图编辑：程序博客网时间：2024/06/02 02:02

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

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

现在来练练画圆。

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.fillStyle="#FF0000";    cxt.arc(100,100,80,0,Math.PI*2,false);    cxt.fill();</script>

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

x：圆心x坐标

y：圆心y坐标

radius：圆的半径

startRad：初始弧度

endRad：结束弧度

anticlockwise：画圆的方向，true：逆时针 false：顺时针默认是false

弧度：是以x轴正方向（即3点针方向），顺时针旋转的角度来计算的。

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

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

<script type="text/javascript">    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.fillStyle="#FF0000";    cxt.arc(100,100,80,Math.PI*0,Math.PI*0.5,false);    cxt.fill();</script>

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

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

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

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

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

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

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

<script type="text/javascript">    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.strokeStyle='#000000';    cxt.arc(100,100,80,Math.PI*0,Math.PI*0.5,false);    cxt.stroke();</script>

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

再绘制一个圆圈图形

<script type="text/javascript">    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.strokeStyle='#000000';    cxt.arc(100,100,80,Math.PI*0,Math.PI*2,false);    cxt.stroke();</span></script>

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

PS：

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

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

0 0