用canvas绘制一个饼状图...

Canvas，网页原来是可以画出来的...

---

1. 认识Canvas
2. Canvas绘制矩形
3. Canvas绘制圆形
4. 使用moveTo()和lineTo()绘制路径
5. Canvas绘制一个饼状图

 

认识Canvas

---

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。但绘制图形，并不是指使用鼠标作画，而是需要javascript进行配合。创建canvas的时候，他默认的宽高为300px*150px。

我是一个画布

​​​Canvas绘制矩形

---

我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。那么，我们想在canvas上面画出矩形，我们就需要认识以下几种api。

方法	描述
getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

但有些时候，我们希望能够修改矩形的样式，又不可以直接通过修改css方式来修改。那么在canvas中也提供了api为我们来修改样式。

方法	描述
fillStyle	填充背景颜色
strokeStyle	设置边框颜色
lineWidth	设置边框的宽度

Canvas绘制圆形

---

绘制圆形,canvas也为我们提供了arc这个方法：

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。

 其中有个弧度转换的公式：degreens*Math.PI/180，绘制圆形默认按照以下的位置进行切换。

使用moveTo()和lineTo()绘制路径

我们可以使用moveTo()和lineTo()绘制直线，或者是自己想要的图形，不局限于矩形。

方法	描述
moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。
linejoin	设置两线段连接处所显示的样子。round,bevel,miter
lineCap	线段端点显示的样式
save	保存绘画路径
restore	销毁路径

注意:我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。(linejoin)

用Canvas绘制一个饼状图

那么重点来了，如何用Canvas绘制一个饼状图呢？下面是我的代码，带注释。

	
		
		
		
	
	
		//创建画布
		

	

下面是效果图：