点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
canvas是HTML5提供的新标签，通过JavaScript可以在Canvas元素上绘制图片并实现动画效果，今天展示一下Canvas绘制一个简单饼图的基本过程。
实现上面图中的饼图效果，首先在HTML引入Canvas标签，代码如下：
1、在JavaScript文件，创建PieChart类，并在其构造函数中获取Canvas的Context环境。
2、添加PieChart类原型方法load用于载入饼图所使用的数据，并计算饼图的数据总量，用于之后渲染饼图时分配每个数据所对应的扇形比例。
3、添加PieChart类原型方法render用于对饼图进行渲染，_generateLegend内部函数用于创建饼图对应的图例，当存在legend参数调用_generateLegend生成饼图图例。
4、最后，引入需要绘制的数据创建饼图对象即可完成饼图绘制。
JavaScript代码如下：
总结一下：
在目前来看在移动端利用2d放射变换来实现的动画比较实惠的还是canvas 2d了。在大部分机型上canvas都能获得更好的渲染性能（在硬件加速情况下，浏览器会将绘图命令切换成gpu硬件来执行），并且现在的硬件加速支持程度也比较好。所以如果需要运动的物体多的话建议用canvas。
注：需要源代码运行的可以私信哟！！
