Canvas绘制圆的详解与实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30668579/article/details/49149693

本文介绍了如何使用Canvas API的arc方法绘制圆，详细解释了各参数含义，包括圆心坐标、半径、弧度定义及方向。通过实例演示了从3点到6点的弧线绘制，帮助理解弧度的计算方式，并提供了不填充只绘制边框的圆的技巧。建议对弧度概念模糊的读者查阅相关资料辅助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前练习了一下绘制矩形顺便了解了一些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：

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

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