canvas 环形饼状图_Canvas 饼图与动效

2016-06-24

用 Canvas 绘制一个饼图且实现动效。涉及：canvas 基本 api, requestAnimationFrame, d3.js, Path2D等等。本文是一个思路总结，仍有很多待优化的地方。

前言

在 canvas 上绘制一个饼图，要求动效如下：

pie-animation.gif

canvas 动效的本质：不断绘制每一帧

对动画帧节的控制：

有一个总的 requestAnimationFrame(RAF)，

使用 RAF 自提供的 t，来做动画的间隔控制

开始绘制一个静态的饼图

使用 d3.js 来计算生成饼图路径。( d3是什么？ )

d3.layout.pie() 计算组成饼图的弧的开始和结束的角度

d3-layout-pie.png

d3.svg.arc() 传入内半径、外半径、开始弧度和结束弧等，生成环形路径数据。

pie1.png

生成三段 svg 路径：

```

M4.898587196589413e-15,-80A80,80 0 1,1 -3.06285495914156e-14,80L-2.4502839673132476e-14,64A64,64 0 1,0 3.91886975727153e-15,-64Z

M-3.06285495914156e-14,80A80,80 0 0,1