1 绘制圆形（arc）

ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y圆心坐标，r半径；
sAngle,eAngle:起始，结束角度。
counterclockwise:是否是逆时针。true为逆时针，false为顺时针（默认）

• 弧度和角度的转换公式： rad = deg*Math.PI/180

• 圆形上面的点的坐标的计算公式

• x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

• y =y0 + Math.sin(rad) * R;//注意都是弧度

  <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
  
      //弧形：圆心，半径，角度
      var x0 = 200;
      var y0 = 200;
      var radius = 100;
      var Angle = 72;
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      //角度都要转成弧度
      ctx.arc(x0,y0,radius,0,Angle*Math.PI/180,false);        //counterclockwise:false 表示顺时针（默认）
      ctx.stroke();
      ctx.fillStyle = 'pink';
      ctx.fill();
  
      ctx.beginPath();
      ctx.strokeStyle = "blue";
      ctx.lineWidth = 6;
      ctx.arc(x0,y0,radius,Angle*Math.PI/180, 270*Math.PI/180,false);
      ctx.stroke();
      //ctx.fillStyle = 'orange';
      ctx.fill();
  </script>
  

2 非零正交原则

ctx.fill()；

注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

1.如果线段是与路径的顺时针部分相交，则计数器加1，
2.如果线段是与路径的逆时针部分相交，则计数器减1，
3.若计数器最终结果不是0，在调用fill()方法时，浏览器就会对其进行填充；若为0，就不对其填充。

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.arc(250,250,200,0,2*Math.PI,true);
ctx.arc(250,250,100,0,2*Math.PI,false);
ctx.fillStyle = "pink";
ctx.fill();
</script>