Canvas(3)---绘制饼状图

Canvas(3)---绘制饼状图

有关canvas之前有写过两篇文章

1、Canvas(1)---概述+简单示例

2、Canvas(2)---绘制折线图

在绘制饼状图之前，我们先要理解什么是圆弧,如何在画布中绘制文字等等。所以这里将绘制饼状图理解拆分成以下几个步骤：

1、理解圆弧
2、绘制一段圆弧
3、绘制一个扇形
4、绘制一个六等圆
5、绘制一个根据数据的饼图
6、绘制在画布中心的一段文字
7、绘制完整饼状图

什么是弧度 弧度是一种长度的描述单位, 一个半径的长度就表示一弧度，所以一个圆有2*π个弧度。

一、绘制一段圆弧

效果

代码

思考 为什么这里四分之一的弧度是这个方向的,那是因为canvas指定了规则

所以上面 Math.PI/2 到 Math.PI，且是 顺时针 的。由这两点最终绘制的就是上面的效果了。

二、绘制一个扇形

效果

代码

三、绘制一个圆分成六等分颜色随机

效果

代码

四、绘制一个根据数据的饼图

上面是平均分成了6等分，这里是根据具体的数据来按比例分成若干份。

效果

代码

五、绘制在画布中心的一段文字

效果

代码

六、绘制完整饼状图

上面所做的都是为了整个饼状图做铺垫的。

效果

代码

别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(11)