如何用arc方法绘制圆形？

要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行如下步骤：

①开始创建路径；

②创建图像的路径；

③关闭路径；

④进行图形绘制。

简单来说，绘制圆形的步骤是先使用路径勾勒图形轮廓，然后设置颜色，进行绘制。

（1）开始创建路径。

使用图形上下文对象的beginPath（）方法创建路径，该方法的定义如下：

context.beginPath();

该方法不使用参数。通过调用该方法，开始路径的创建。

（2）创建图像的路径。

使用图形上下文对象的arc方法。该方法的定义如下：

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

该方法使用6个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。在canvasAPI中，绘制半径与弧时指定的参数为开始弧度与结束弧度，如果习惯使用角度，请使用如下方法将角度转换为弧度：(www.xing528.com)

varradians=degrees＊math.PI/180;

其中math.PI表示角度为180度，math.PI*2表示角度为360度。arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。因此，使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。Anticlockwise参数为一个布尔值的参数，参数值为true时，按顺时针绘制；参数值为false时，按逆时针绘制。

（3）关闭路径。

路径创建完成后，使用图形上下文对象的closePath方法将路径关闭。该方法的定义如下：

context.closePath();

将路径关闭后，路径的创建工作就完成了，但是需要注意的是，这时只是路径创建完毕而已，还没有真正绘制图形。

（4）进行图形绘制。

进行圆形绘制，并设定绘制样式。实现的代码如下：

context.fillStyle='rgba(255,0,0,0.25)';

context.fill();

绘制完成的图形在浏览器中的显示效果如图8.5所示。

图8.5　在canvas画布上画圆形