canvas当中画圆和圆弧都是使用arc这个方法,工作当中这个方法和画矩形的方法用的是比较多的,比如饼图就可以使用这个方法来画,饼图在后台中常常用来呈现报表数据。
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise)
参数解析:
- x和y参数是弧的x坐标和y坐标,这是正在绘制的圆弧或圆的中心。圆弧是圆的一段而已。
- radius参数是圆弧所沿的圆的半径。
- startAngle和endAngle参数是圆弧开始和结束的角度,以弧度为单位。
- 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();
效果: