环形图在html里面制作,如何用canvas画图表（1）扇形图和环形图

如何用canvas画图表(1)扇形图和环形图

现在canvas图表的库越来越多，也越来越成熟，以致于大家想到图表制作都直接想着用第三方库，而忽略了自己动手制作的可能性。其实要绘制一个简单基本的canvas图表库并不难。下面就让我展开介绍。

第一期，我先挑了最基础的扇形和环形图表进行讲解。

若要看懂此文，先要阅读一下MDN的canvas文档。

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

有了canvas的基础之后，我们便可以开始对问题进行拆解。

画一个扇形或者环形图需要什么元素。

1. 画一出扇形或环形，以及上色

2. 数据标签。

3. 动画效果。

1. 绘制图形，则需要找到合适的绘制图形的函数。

绘制圆弧 arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有五个参数： x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及engAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

重复以上步骤，则可以将各个扇形分别画出来。

如果想画环形，则给线上色，而非画扇形那样，