上一篇文章我们使用Canvas绘制了WiFi信号，对arc方法有一定的了解了。
这篇我们添加一个工作中更加常用的场景-使用Canvas绘制数据扇形图。效果如下：
分析扇形图
如图所示，我们需要准备：
- 一组数据包含：颜色，描述文字，金额。
- 以及arc方法。
了解canvas文本方法：
gd.font
gd.filltext("str",x,y)
gd.textAlign
gd.textBaseline设置垂直线对齐。
了解文本方法后呢，我们依然用第三篇绘制柱状图的面向对象的方式来绘制扇形图。
先准备一个div标签用来存放扇形图：
<!DOCTYPE html>
接着我们在按照分析定义data数据：
<
然后我们拿到div的宽高，id，保存至全局变量中，供canvas使用：
var
定义构造函数
为了使我们的代码能够复用，我们用面向对象的方式来绘制扇形图，定义一个PieChart函数：
function
方法写在原型上
configurePieChart函数定义在PieChart的原型上，依赖的两个函数作用是设置画布参数，扇形图的规格：
PieChart
创建canvas元素：
PieChart
设置画布参数id 宽高 数据：
PieChart
设置扇形图的圆心，半径比例：
PieChart
初始化函数以及所需要依赖的函数：
PieChart
模拟整理来自后台的数据：
PieChart
数据处理计算total数据总和用来算绘制扇形比例：
PieChart
因为绘制从12点位置顺时针绘制所以添加一个d2a方法：
PieChart
绘制扇形图：
PieChart
绘制小圆点,lcArr为二维数组，lcArr的某一项保存着小圆点的x，y坐标：
PieChart
绘制线条：
PieChart
绘制描述文字包含金额与消费类型：
PieChart
将绘制扇形图的各个方法，存放到draw函数中：
PieChart
最后调用构造函数,传入定义的全局变量：
var
总结：
我们了解了Canvas文本方法，逐步绘制扇形图，扇形图本身不难，分配扇形图各个点的坐标，是有一定难度的，在平常多了解些数学知识，会对自己有帮助的。
本篇内容到这里就结束了，下一篇我们将会绘制一个精美时钟。来巩固我们的基础知识。
