HTML5 Canvas 开发绘图方法整理【四、canvas曲线图形 / 圆形】

绝地灬酷狼 2022-05-31 08:45 243阅读 0赞

其实在Canvas 中的基本图形就只有两个 ： 直线图形 和 曲线图形 。

圆形也算是在曲线图形中，一般画圆的时候必须配套使用 beginPath() 和 closePath()，圆形属于一个“闭合图形”，先在画布上开辟一个路径，画完以后结束路径。

语法：

ctx.beginPath();  
ctx.arc(x,y,半径,开始角度,结束角度, 是否逆时针绘制); 默认为false

ctx.closePath();  
ctx.stroke();

自己画的一个简单的解说图：(｀・ω・´)

![这里写图片描述][70]

代码：

let cans=document.getElementById("fourthlyC");
        let ctx=cans.getContext("2d");
    
        ctx.beginPath(); //开始新路径
        ctx.arc(150,100,70,0,180*Math.PI/180,true); //以画布X轴 坐标150 Y轴坐标300点为圆心 画一个半径长70，度数为180，的圆，逆时针旋转
        ctx.closePath(); //结束这次绘图路径，不影响其他
        ctx.stroke(); //以描边方式显示这个圆
    
        //角度的单位建议写  *Math.PI/180  这样设定了多少度一目了然
    
        ctx.beginPath();
        ctx.arc(550,100,70,0,180*Math.PI/180); 
                        //最后一个值不写默认是不旋转的
        ctx.closePath();
        ctx.strokeStyle="#1AC6FF"; //定位圆边的颜色
        ctx.stroke();

效果图：

![这里写图片描述][70 1]

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

也可以同时绘制两个圆形叠加在一起：

//给圆 填充上颜色
        ctx.beginPath();
        ctx.arc(550,400,150,0,360*Math.PI/180);
        ctx.closePath();
        ctx.fillStyle="#f00";
        ctx.fill();
    
        //第二个圆
        ctx.beginPath();
        ctx.arc(550,400,100,0,360*Math.PI/180);
        ctx.closePath();
        ctx.fillStyle="#FFFC43";
        ctx.fill();

效果图：  
![这里写图片描述][70 2]

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

然后再来说说另一个：  
画弧线

画弧线与画圆 最大区别就是不使用closePath() 这个方法，弧线不属于“闭合图形” 所以并不需要封闭它；  
closePath()主要是用来连接起点和终点

语法：

ctx.beginPath();  
ctx.arc(x,y,半径,开始角度,结束角度, 是否逆时针绘制);  
ctx.stroke();

ctx.beginPath();
        ctx.arc(150,400,100,0,270*Math.PI/180);
        ctx.strokeStyle="#391C9B";
        ctx.stroke();

效果图：  
![这里写图片描述][70 3]

[70]: /images/20220531/a24de0a6a5394d6e93d369c603c1b4cc.png
[70 1]: /images/20220531/a716300cf67b4713a3fc0ce0cc0cc0bb.png
[70 2]: /images/20220531/fd580ff4adfc4ada8cb01f07d8e342e8.png
[70 3]: /images/20220531/22da97221033409083d05ad0ab1e0e02.png