canvas之绘制圆形

Posted 2020-10-24 mhxy13867806343

当利用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>