学习Canvas绘图与动画基础 制作弧和圆（五）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>制作弧和圆</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:50px auto;"> 9 当前浏览器不支持Canvas,请更换浏览器 10 </canvas> 11 <script> 12 window.onload=function(){ 13 var canvas=document.getElementById("canvas"); 14 15 canvas.width=1024; 16 canvas.height=768; 17 18 var context=canvas.getContext("2d"); 19 20 context.lineWidth=5; 21 context.strokeStyle="#005588"; 22 context.arc(300,300,200,0,1.5*Math.PI); 23 context.stroke(); 24 } 25 </script> 26 <!-- 27 说明： 28 1.context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)；//(圆心x坐标，圆心y坐标，半径，开始弧度值，结束弧度值，弧线绘制方向)弧线绘制方向默认为false为顺时针绘制方向。 29 30 --> 31 32 </body> 33 </html>
绘制效果如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>制作弧和圆</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:50px auto;"> 9 当前浏览器不支持Canvas,请更换浏览器 10 </canvas> 11 <script> 12 window.onload=function(){ 13 var canvas=document.getElementById("canvas"); 14 15 canvas.width=1024; 16 canvas.height=768; 17 18 var context=canvas.getContext("2d"); 19 20 context.lineWidth=5; 21 context.strokeStyle="#005588"; 22 for(var i=0;i<10;i++){ 23 context.beginPath(); 24 context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); 25 context.closePath(); 26 context.stroke(); 27 } 28 for(var i=0;i<10;i++){ 29 context.beginPath(); 30 context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10); 31 context.stroke(); 32 } 33 for(var i=0;i<10;i++){ 34 context.beginPath(); 35 context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true); 36 context.closePath(); 37 context.stroke(); 38 } 39 context.fillStyle="#005588"; 40 for(var i=0;i<10;i++){ 41 context.beginPath(); 42 context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true); 43 context.closePath(); 44 context.fill();; 45 } 46 47 for(var i=0;i<10;i++){ 48 context.beginPath(); 49 context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10,true); 50 context.fill();; 51 } 52 53 54 } 55 </script> 56 <!-- 57 说明： 58 1.当我们当前绘制的状态的路径不是封闭的路径的时候，如果我们使用了closePath()，closePath()会自动的为我们将这段不封闭的路径的首尾用线段连接起来 59 2.beginPath()和closePath()不一定要成对出现，beginPath()代表为我们规划一段新的路径，beginPath()代表要结束当前路径，如果当前路径没有封闭，会自动封闭路径 60 3.closePath()这个函数对于fill()是没有用的，当调用fill()时，canvas会自动把没有封闭的路径给封闭 61 --> 62 63 </body> 64 </html>
