canvas绘图详解-02-绘制弧和圆

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wufangfang/p/6370331.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML5 Canvas API中的context.arc()函数绘制不同类型的圆和弧线。通过对实例代码的分析，展示了如何实现顺时针与逆时针方向的绘制，以及如何利用closePath属性实现图形的封闭与填充。

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

通过画下面这个来解析一下画弧和圆的基本函数

一、画弧和圆的函数

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y是圆的圆心坐标，r是圆心的半径，sAngle是起始角，以弧度计，也就是画得圆的开始。eAngle是结束角，也就是画圆的结束。counterclockwise时顺时针画还是逆时针画。

（弧的圆形的三点钟位置是 0 度）

下面这个代码就是画出上面那些弧和圆的例子

<!DOCTYPE html>
<html>
<head>
    <title>画圆</title>
</head>
<body>
<canvas id="canvas" width="1080" height="768" style="border: 1px solid #aaa;margin: 50px auto;display: block;">
    当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        /*//顺时针
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        context.arc(300,300,200,0,1.5*Math.PI,true);
        context.stroke();
        //逆时针
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        context.arc(300,300,200,0,1.5*Math.PI);
        context.stroke();*/
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        //首尾相连
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,60,40,0,2*Math.PI*(i+1)/10);
            context.closePath();

            context.stroke();
        }
        //首尾不相连 closepath封闭路径
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,180,40,0,2*Math.PI*(i+1)/10);

            context.stroke();
        }
        //首尾相连 逆时针
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
            context.closePath();

            context.stroke();
        }
        //首尾不相连 逆时针
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,420,40,0,2*Math.PI*(i+1)/10,true);

            context.stroke();
        }
        context.fillStyle = "#005588";
        //首尾相连 顺时针 有closePath填充
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,540,40,0,2*Math.PI*(i+1)/10);
            context.closePath();

            context.fill();
        }
        //首尾相连 顺时针 无closePath填充 fill有无closePath都行
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,660,40,0,2*Math.PI*(i+1)/10);

            context.fill();
            
        }

    }
</script>
</body>
</html>

注意：

closepath封闭路径，顺时针和逆时针画出来的不一样。

转载于:https://www.cnblogs.com/wufangfang/p/6370331.html