canvas当中画圆和圆弧都是使用arc这个方法，工作当中这个方法和画矩形的方法用的是比较多的，比如饼图就可以使用这个方法来画，饼图在后台中常常用来呈现报表数据。

ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise)

参数解析:

1. x和y参数是弧的x坐标和y坐标,这是正在绘制的圆弧或圆的中心。圆弧是圆的一段而已。
2. radius参数是圆弧所沿的圆的半径。
3. startAngle和endAngle参数是圆弧开始和结束的角度,以弧度为单位。
4. counterClockwise参数是一个布尔值，指定是否按逆时针方向绘制。默认情况下，圆弧是顺时针绘制的，但如果此处的参数为true，则圆弧将逆时针绘制。我们将使用值false，因为我们将顺时针绘制。

下面这张图可以很好解释上面的参数:

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.fillStyle = "rgb(0, 0, 255)";
      context.beginPath(); 
      context.arc(230, 90, 50, 0, Math.PI*2, false); // 画一个圆
      context.closePath(); 
      context.fill(); 

这段代码画了一个实心圆,效果如下:

注意html5 canvas上的角度是以弧度而不是度数来表示的，360度(一个完整的圆)是2π(π乘以2)弧度。javascript中度数转换成弧度：

var degrees = 100; var radians = degrees * (Math.PI / 180);

现在,我们来画个半圆试试:

context.arc(230, 90, 50, 0, Math.PI, false); // 半圆,endAngle为Math.PI了

---

画圆弧的话就是就调用stroke进行描边即可:

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.strokeStyle = "rgb(0, 0, 255)";
      context.beginPath();
      context.arc(100,75,50,Math.PI,2*Math.PI,true);
      context.stroke();

效果: