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(); 

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

canvas画圆

注意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了

canvas semicircle


画圆弧的话就是就调用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();

效果:

canvas arc

渝ICP备20006974号-2