用Canvas来处理好一个饼图

Posted 2021-04-29 小郑搞码事

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。