H5制作饼状图

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

html代码

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

JS代码

var color = ["#999999","#333333","#336799"]; var data = [25,35,50]; function drawCircle(){ var canvas = document.getElementById("bingtu"); var ctx = canvas.getContext("2d"); var startPoint= 1.5 * Math.PI; for(var i=0;i<data.length;i++){ ctx.fillStyle = color[i]; ctx.strokeStyle = color[i]; ctx.beginPath(); ctx.moveTo(112,65); ctx.arc(112,65,65,startPoint,startPoint-Math.PI*2*(data[i]/100),true); ctx.fill(); ctx.stroke(); startPoint -= Math.PI*2*(data[i]/100); } } drawCircle();

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

这里重点讲下这段js代码用法

var color = ["#999999","#333333","#336799"];  画饼图所用的颜色

var data = [25,35,50];  数据比，全部是数据加起来是100，才能画满整个圆

var ctx = canvas.getContext("2d");  画2D平面图

var startPoint= 1.5 * Math.PI; 绘制方向起点，有逆顺之分，通常是 1.5*Math.PI 或者 0

ctx.fillStyle = color[i]   填充颜色

ctx.beginPath(); 开始画

ctx.moveTo(112,65);   每次回到圆心，第一个值 112 是 canvas 宽的一半， 65是 canvas 高的一半。其实也可以利用js获取对象的宽高算出来就好，省该canvas宽高后还要去调整JS代码中的参数。

ctx.arc(...); 开始画图，前两个参数是圆心坐标，第三个参数是半径大小，第四个参数是圆周起始位置，第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，第六个参数是个布尔值，就是确定是顺时针还是逆时针，这里false是顺时针。

ctx.fill() ; 填充

ctx.stroke(); 边框

startPoint -= Math.PI*2*(data[i]/100); 画完一个善行以后，重新计算回到原点开始绘制下一扇，否则画出来的饼图拼起来就不是圆形了。

效果：

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

其它HTML5与CSS3图形统计数据示例