浅谈HTML5与css3画饼图！_H5之家 - 中国HTML5教程资源分享第一站

近来比较忙，有点无暇顾忌小站了！于是忙里偷闲，把项目中的收获记录下来，方便他人，提升自己！

神马系饼图？

饼图，大家都应该熟知，在统计数据对比方面，几乎处处用到。如cnzz的统计饼图

从饼图中，很形象地展示了访问者地区的分布，以扇形为块的方式拼成一个大圆。

都使用什么方法实现

目前众多站点制作饼图大多使用flash，或者后台语言生成，如PHP，Python只要安装相应的基础库就能实现画图。但很少有站点这么干，因为耗费服务器资源。

cnzz里使用的就是flash

PHP生成的

HTML5与CSS3也能画出饼图

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

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

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

html代码

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(); 边框