canvas之绘制圆形

当利用canvas进行图形绘制时，对于那么些未关闭的图形，默认会将其关闭，一下实现了如何绘制未关闭图形，以及如何给区域内填充色彩等常用的方法。

以下是腻子，复制粘贴至一格式为HTML的文档即可用：

<canvas id="canvas"style="border:5px solid #ccc;display: block;margin:0 auto;"></canvas>

 1 <script type="text/javascript">
 2 window.onload=function(){
 3 var canvas=document.getElementById("canvas");
 4
 5 canvas.width = 1024;
 6 canvas.height = 800;
 7 var context=canvas.getContext("2d");
 8 context.lineWidth=5;
 9 context.strokeStyle="#005588";
10
11
12 for(var i=0;i<10;i++){
13 context.beginPath();
14 context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10,false);
15
16 context.closePath();
17 context.stroke();
18 }
19 for(var i=0;i<10;i++){
20 context.beginPath();
21 context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10,false);
22 context.stroke();
23 }
24 for(var i=0;i<10;i++){
25 context.beginPath();
26 context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
27 context.closePath();
28 context.stroke();
29 }
30 context.fillStyle="#005588";
31 for(var i=0;i<10;i++){
32 context.beginPath();
33 context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
34 context.stroke();
35 context.fill();
36 }
37
38 }
39 </script>

原文地址：https://www.cnblogs.com/mhxy13867806343/p/8447157.html