HTML5 Canvas 2D arc方法使用说明

先看一下2d上下文对象中关于arc接口的定义：

1

void arc(

2	in float x,

3	in float y,

4	in float radius,

5	in float startAngle,

6	in float endAngle,

7	in boolean anticlockwise)

当使用一个canvas元素的getContext(“2d”)方法时，返回的是一个CanvasRenderingContext2D对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0, 0)，在本平面坐标中向右则x坐标值增加向下则y坐标值增加。

在arc接口中，前两个参数x,y指定了要绘制的圆弧的圆心坐标，radius是圆的半径，startAngle和endAngle指定了弧的起始和结束的角度，anticlockwise指定是否使用逆时针方向绘图。

示例：

01	var canv = document.getElementById(´can´);

02	if (canv.getContext)

03

{

04	var c = canv.getContext(´2d´);

05

06	c.strokeStyle=´#00f´;

07

08	c.beginPath();

09	c.arc(100,100,50,0,0.5*Math.PI, false);

10

11	c.stroke();

12

}