HTML5中使用canvas绘制圆形

2019独角兽企业重金招聘Python工程师标准>>>

下面我们就来看一下使用canvas如何绘制除矩形以为的其他图形，要想绘制其他图形，需要使用路径，同样在绘制之前，先要获取图形上下文，然后在执行以下步骤：

1开始.创建路径

使用图形上下文对象beginPath方法，使用如下：context.beginPath();

该方法没有参数，通过调用该方法开始创建路径。

2.创建图形的路径

需要使用图形上下文对象方法arc，使用如下：

context.arc（x,y,radius,startAngle,endAngle,anticlockwise）;

该方法有6个参数，x为绘制圆形起点的横坐标，y为绘制圆形起点的纵坐标，radius为圆形的半径，startAngle为开始的角度,endAngle为结束的角度,anticlockwise为是否按顺时针方向进行绘制，这是一个布尔类型的参数，值为true时，表示按顺时针绘制。

 

3.路径创建完成后，关闭路径

使用图形上下文的closePath方法，使用如下：

context.closePath();

 

4.设定绘制样式，调用绘制方法，绘制路径

设置图形上下文context的fillStyle属性值，可以设置圆形的颜色。然后再调用fill方法。

context.fill();因为路径已经决定了图形的大小，所以这里就不需要在该方法中使用参数来指定图形的大小了。

 

运行的效果为：

 

 

转载于:https://my.oschina.net/u/2971691/blog/873862