【Canvas技法】图解绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise)
【一图释疑】
注：true/false是顺时针还是逆时针总容易弄混，在这里我提供一个口诀：广东有座城市叫佛山，佛山旁边有座城市叫顺德，所以佛即顺，也就是false=顺时针。
【绘制上图用代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>Html5/Canvas中绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise) 的具体用法图解。</title> <style type="text/css"> .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="centerlize"> <canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ // canvas的绘图环境 var ctx; // 高宽 const WIDTH=1024; const HEIGHT=512; // 舞台对象 var stage; //------------------------------- // 初始化 //------------------------------- function init(){ // 获得canvas对象 var canvas=document.getElementById('myCanvas'); canvas.width=WIDTH; canvas.height=HEIGHT; // 初始化canvas的绘图环境 ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央 // 准备 stage=new Stage(); stage.init(); // 开幕 animate(); } // 播放动画 function animate(){ stage.update(); stage.paintBg(ctx); stage.paintFg(ctx); // 循环 if(true){ window.requestAnimationFrame(animate); } } // 舞台类 function Stage(){ // 初始化 this.init=function(){ } // 更新 this.update=function(){ } // 画背景 this.paintBg=function(ctx){ ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 // 上标题 ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "24px consolas"; ctx.fillStyle="black"; ctx.fillText("arc(x,y,radius,start,end,true/false)",0,-220); //----------以下为左圆 // 逆时针第一象限 ctx.beginPath(); ctx.arc(-250,0,200,0,-Math.PI/2,true); ctx.lineTo(-250,-200); ctx.lineTo(-234,-208); ctx.lineTo(-250,-200); ctx.lineTo(-234,-192); ctx.lineWidth=2; ctx.strokeStyle="blue"; ctx.stroke(); // 逆时针第二象限 ctx.beginPath(); ctx.arc(-250,0,200,-Math.PI/2,-Math.PI,true); ctx.lineTo(-450,0); ctx.lineTo(-458,-16); ctx.lineTo(-450,0); ctx.lineTo(-442,-16); ctx.lineWidth=2; ctx.strokeStyle="green"; ctx.stroke(); // 逆时针第三象限 ctx.beginPath(); ctx.arc(-250,0,200,-Math.PI,-Math.PI*3/2,true); ctx.lineTo(-250,200); ctx.lineTo(-262,192); ctx.lineTo(-250,200); ctx.lineTo(-262,208); ctx.lineWidth=2; ctx.strokeStyle="teal"; ctx.stroke(); // 逆时针第四象限 ctx.beginPath(); ctx.arc(-250,0,200,-Math.PI*3/2,-Math.PI*2,true); ctx.lineTo(-50,0); ctx.lineTo(-42,16); ctx.lineTo(-50,0); ctx.lineTo(-58,16); ctx.lineWidth=2; ctx.strokeStyle="navy"; ctx.stroke(); // 标注角度 var arr=["-PI/2","-PI","-PI*3/2","-PI*2或0"]; for(var i=0;i<arr.length;i++){ var theta=-(i+1)*Math.PI/2; var x=150*Math.cos(theta); var y=150*Math.sin(theta); ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "24px consolas"; ctx.fillStyle="black"; ctx.fillText(arr[i],x-260,y+5); } // 标注true=逆时针 ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "48px consolas"; ctx.fillStyle="blue"; ctx.fillText("true",-250,-10); ctx.fillText("逆时针",-250,50); //----------- 以下为右边圆 // 顺时针第四象限 ctx.beginPath(); ctx.arc(250,0,200,0,Math.PI/2,false); ctx.lineTo(250,200); ctx.lineTo(264,192); ctx.lineTo(250,200); ctx.lineTo(264,208); ctx.lineWidth=2; ctx.strokeStyle="red"; ctx.stroke(); // 顺时针第三象限 ctx.beginPath(); ctx.arc(250,0,200,Math.PI/2,Math.PI,false); ctx.lineTo(50,0); ctx.lineTo(58,16); ctx.lineTo(50,0); ctx.lineTo(42,16); ctx.lineWidth=2; ctx.strokeStyle="maroon"; ctx.stroke(); // 顺时针第二象限 ctx.beginPath(); ctx.arc(250,0,200,Math.PI,Math.PI*3/2,false); ctx.lineTo(250,-200); ctx.lineTo(234,-192); ctx.lineTo(250,-200); ctx.lineTo(234,-208); ctx.lineWidth=2; ctx.strokeStyle="purple"; ctx.stroke(); // 顺时针第一象限 ctx.beginPath(); ctx.arc(250,0,200,Math.PI*3/2,Math.PI*2,false); ctx.lineTo(450,0); ctx.lineTo(442,-16); ctx.lineTo(450,0); ctx.lineTo(458,-16); ctx.lineWidth=2; ctx.strokeStyle="fuchsia"; ctx.stroke(); // 标注角度 var arr=["PI/2","PI","PI*3/2","PI*2或0"]; for(var i=0;i<arr.length;i++){ var theta=(i+1)*Math.PI/2; var x=150*Math.cos(theta); var y=150*Math.sin(theta); ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "24px consolas"; ctx.fillStyle="black"; ctx.fillText(arr[i],x+240,y+5); } // 标注true=逆时针 ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "48px consolas"; ctx.fillStyle="red"; ctx.fillText("false",250,-10); ctx.fillText("顺时针",250,50); // 下标题 ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = "24px consolas"; ctx.fillStyle="black"; ctx.fillText("arc函数末参与起止角度的配合",0,220); ctx.font = "8px consolas"; ctx.fillStyle="black"; ctx.fillText("逆火原创",WIDTH/2-30,HEIGHT/2-10); } // 画前景 this.paintFg=function(ctx){ } } /*--------------------------------------------- 勿问成功的秘诀为何，且尽全力做你应该做的事吧。 成功的秘诀端赖坚毅的决心。 成功并非重要的事，重要的是努力。 成功是用努力，而非用希望造成。 不论成功或失败，皆存乎自己。 成功毫无技巧可言，我一向只对工作尽力而为而已。 ----------------------------------------------*/ //--> </script>
END
