上一篇文章我们使用Canvas绘制了WiFi信号，对arc方法有一定的了解了。
这篇我们添加一个工作中更加常用的场景-使用Canvas绘制数据扇形图。效果如下：
分析扇形图
如图所示，我们需要准备：
- 一组数据包含：颜色，描述文字，金额。
- 以及arc方法。
了解canvas文本方法：
gd.font 设置为包含字体样式，大小和字体的字符串，并用空格分隔，
gd.filltext("str",x,y) 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文本方法，逐步绘制扇形图，扇形图本身不难，分配扇形图各个点的坐标，是有一定难度的，在平常多了解些数学知识，会对自己有帮助的。
本篇内容到这里就结束了，下一篇我们将会绘制一个精美时钟。来巩固我们的基础知识。
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
