canvas是前端绘制统计图的首选工具，提升用户体验的金钥匙。饼图统计图就是经典的例子。

先看效果图，这里是原生HTML+JavaScript+canvas完成的。

绘制常用canvas的api。

绘制饼图核心逻辑

1. 利用arc画圆，每部分饼图以该圆的圆心为中心，由弧度控制圆的大小；

2. 上一个饼图部分结束弧度是下一个饼图部分的起始弧度；

3. 直角三角函数：sinA = a / c; cosA = b / c，饼图弧度计算用到；

4. 把数量转化为弧度公式：扇形部分数量 / 总量 * Math.PI * 2(圆的一周是360度)

5. 绘制伸出线点坐标公式：

完整代码

代码都有注释，感兴趣的伙伴可以仔细看一看，或者把代码粘贴到html文件内部运行看效果，在看源码，基本上就看明白了。

以上就是canvas绘制饼图的全部内容，感谢查阅。文章错误之处，感谢留言纠正。