初探HTML5——canvas元素（四）

目前为止已经演示了使用canvas绘制直线、矩形、虚线，小伙伴们说想要绘制一个圆形，那么该如何操作呢？别急，本小节就来绘制圆形，请不要眨眼。

一、理解参数

想想上学时候用圆规怎么画出一个圆的？要有一个点作为圆心，还要定义一段距离作为圆的半径，然后用圆规在纸上转一圈一个圆就画好了。

在canvas中，通过x，y坐标来确圆心。有了圆心之后，定义半径，开始的弧度，结束的弧度。程序默认的绘制方式是向X方向进行绘制，也就是顺时针。当然这是可以根据需求修改的，先看2组图。

1、逆时针半圆

逆时针半圆

2、顺时针半圆

顺时针半圆

二、绘制完整圆形

好了，先来看看如何绘制一个完整的圆形，并给它填充红色。

调用 context对象的 arc()方法传入x，y坐标，半径，开始弧度、结束弧度绘制圆形。

示例代码：

演示效果：

颜色跟描述的有点差异，不过还是属于红色。

一个完整的圆形

三、揭秘半圆

其实arc()其实有6个参数，第6个参数anticlockwise表示绘制的方向，默认不写值为false：表示顺时针；将值设置为true：表示逆时针方向绘制。

PS：怎样，是不是越发感觉canvas好玩多了？加油！