canvas 画圆

arc 画圆

语法：
ctx.arc(x, y, radius, startAngle, enAngle, Boolean)
圆心坐标： (x, y)
半径： radius
起始角度：startAngle
结束角度：endAngle
旋转方向： true--逆时针 false--顺时针

参数解释
圆心和半径没什么好说的，起始角度和结束角度虽然说是角度，但其实是用弧度来表示位置。范围从 0 - 2π， 在js中， Math.PI 表示π， 所以范围是 0- 2*Math.PI。
还有个就是旋转方向，也就是图行的绘制方向，确定了起始点和结束点， true为逆时针绘制， false为顺时针绘制。 不同的绘制方向会对图行产生影响。

首先，看下图

例子

绘制一个完整的圆形

 <canvas id='canvas'></canvas>

   let can =  document.getElementById('canvas')
   if(can.getContext) {
     var ctx = can.getContext('2d')
     ctx.beginPath()
     ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
     ctx.stroke();
   }

绘制一个半圆

     var ctx = can.getContext('2d')
     ctx.beginPath()
     ctx.arc(75,75, 50, Math.PI* 0.2, Math.PI* 0.7, false) // 绘制
     ctx.stroke();

绘制一个3/4圆弧

  var ctx = can.getContext('2d')
  ctx.beginPath()
  ctx.arc(75,75, 50, Math.PI* 0.2, Math.PI* 0.7, true)
  ctx.stroke();

3/4圆弧的绘制方向是逆时针， 其余条件不变，绘制方向改为顺时针就变成1/4圆弧了

总结

canvas画圆难点在于起始弧度和结束弧度的理解上，只要理解了这两个， 绘制圆形就没有什么难点了