canvas画饼图

不得不说，HTML5与CSS3的推出，将推翻老一代的网页制作者。特别在当今浏览器标准不断统一的情况下，新生的网页制作者几乎想不到在过去的时间里制作网页调兼容性是一件非常痛苦的事。

过去我们要实现圆角只能切图，如今在CSS3里只需一条代码搞定。而CSS3的功能远不止这些，配合HTML5还能画饼图数据分析。

然而，HTML5与CSS3严格意义上不具备编程语言的思想，所以还要借助JS去“画”它。

<canvas id="bingtu"  width="224" height="130" ></canvas>

var color = ["#999999", "#333333", "#336799"]; // 画饼图所用的颜色
var data = [25, 35, 50];  // 数据比，全部是数据加起来是100，才能画满整个圆

function drawCircle() {
    var canvas = document.getElementById("bingtu");
    var ctx = canvas.getContext("2d");   // 画2D平面图
    var startPoint = 1.5 * Math.PI;   // 绘制方向起点，有逆顺之分，通常是 1.5*Math.PI 或者 0
    for (var i = 0; i < data.length; i++) {
        ctx.fillStyle = color[i];  // 填充颜色
        ctx.strokeStyle = color[i];
        ctx.beginPath();  // 开始画
        ctx.moveTo(112, 65);  //每次回到圆心，第一个值 112 是 canvas 宽的一半， 65是 canvas 高的一半。其实也可以利用js获取对象的宽高算出来就好，省该canvas宽高后还要去调整JS代码中的参数。
        ctx.arc(112, 65, 65, startPoint, startPoint - Math.PI * 2 * (data[i] / 100), true);  // 开始画图，前两个参数是圆心坐标，第三个参数是半径大小，第四个参数是圆周起始位置，第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，第六个参数是个布尔值，就是确定是顺时针还是逆时针，这里false是顺时针。
        ctx.fill();  // 填充
        ctx.stroke();  // 边框
        startPoint -= Math.PI * 2 * (data[i] / 100);  // 画完一个善行以后，重新计算回到原点开始绘制下一扇，否则画出来的饼图拼起来就不是圆形了。
    }
}

drawCircle();

canvas是HTML5新增的画布标签，个人感觉这个标签在将来将大有用途，喜欢研究HTML5的童鞋可以深入研究这个标签。canvas上的高度可以自己随意设置，当然宽不能小于高，否则图形出来不是圆的。

效果：

目前唯一的遗憾是还不能在图上加文字。