• arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线

JavaScript 语法

  1. context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
  • 如果我们用arc画一个完整的圆，该怎么搞？大家注意到参数中有个开始角度与结束角度，如果我们开始角度是0，结束角度是360，不就是个正圆了？
    正解！但要注意的是，这里的角度是用“弧度”来表示的（Flash也是如此），一个完整的圆即360度，就是2PI弧度。

Canvas 曲线之arc方法 - 建弧/曲线（用于创建圆或部分圆） - 图1

画圆

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6. </head>
  7. <body>
  8. <canvas id="myCanvas" width="300" height="300" style="border: 1px solid #aaaaaa;">
  9.     您的浏览器不支持 HTML5 canvas 标签。
  10. </canvas>
  13. <script>
  14.     var c = document.getElementById('myCanvas');
  15.     var ctx = c.getContext("2d");
  16.         // 描边圆 
  17.     ctx.beginPath()
  18.     ctx.arc(200,100,20,0,Math.PI*2);
  19.     ctx.strokeStyle = "blue";   
  20.     ctx.stroke();
  21.     // 填充圆 
  22.     ctx.beginPath()
  23.     ctx.fillStyle = "red";   
  24.     ctx.arc(100,100,20,0,Math.PI*2);
  25.     ctx.fill();
  26.       // 1 二分之一圆 Math.PI*2/2 四分之一圆 Math.PI*2/4 默认顺时针展开 
  27.     ctx.beginPath()
  28.     ctx.arc(100,200,20,0,Math.PI*2/2);
  29.     ctx.stroke();
  30.       // 2 逆时针展开 
  31.     ctx.beginPath()
  32.     ctx.arc(200,200,20,0,Math.PI*2/2,true);
  33.     ctx.stroke();
  34. </script>
  35. </body>
  36. </html>
  • 和lineTo一样,arc也是画的路径，所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了蓝色的strokeStyle与红色的fillStyle)。
  • 由图我们可以确定arc的0度就是数学上常用的0度，但是角度默认是顺时针张开的，与数学模型相反（跟坐标有关，因为canvas坐标也与数学坐标相反）。不过counterclockwise参数是确定是否逆时针

    Canvas的arc方法是画正圆弧线的办法，也只能画正弧线，没法画其他奇怪的弧线,比如S形