canvas绘图详解-02-绘制弧和圆
通过画下面这个来解析一下画弧和圆的基本函数
一、画弧和圆的函数
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y是圆的圆心坐标,r是圆心的半径,sAngle是起始角,以弧度计,也就是画得圆的开始。eAngle是结束角,也就是画圆的结束。counterclockwise时顺时针画还是逆时针画。
(弧的圆形的三点钟位置是 0 度)
下面这个代码就是画出上面那些弧和圆的例子
<!DOCTYPE html> <html> <head> <title>画圆</title> </head> <body> <canvas id="canvas" width="1080" height="768" style="border: 1px solid #aaa;margin: 50px auto;display: block;"> 当前浏览器不支持canvas,请更换浏览器后再试 </canvas> <script type="text/javascript"> window.onload=function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); /*//顺时针 context.lineWidth = 5; context.strokeStyle = "#005588"; context.arc(300,300,200,0,1.5*Math.PI,true); context.stroke(); //逆时针 context.lineWidth = 5; context.strokeStyle = "#005588"; context.arc(300,300,200,0,1.5*Math.PI); context.stroke();*/ context.lineWidth = 5; context.strokeStyle = "#005588"; //首尾相连 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath(); context.stroke(); } //首尾不相连 closepath封闭路径 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,180,40,0,2*Math.PI*(i+1)/10); context.stroke(); } //首尾相连 逆时针 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,300,40,0,2*Math.PI*(i+1)/10,true); context.closePath(); context.stroke(); } //首尾不相连 逆时针 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,420,40,0,2*Math.PI*(i+1)/10,true); context.stroke(); } context.fillStyle = "#005588"; //首尾相连 顺时针 有closePath填充 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,540,40,0,2*Math.PI*(i+1)/10); context.closePath(); context.fill(); } //首尾相连 顺时针 无closePath填充 fill有无closePath都行 for(var i = 0 ; i < 10 ; i++){ context.beginPath(); context.arc(100+i*100,660,40,0,2*Math.PI*(i+1)/10); context.fill(); } } </script> </body> </html>
注意:
closepath封闭路径,顺时针和逆时针画出来的不一样。