（转）浅谈HTML5与css3画饼图！

神马系饼图？

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

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

都使用什么方法实现

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

cnzz里使用的就是flash

PHP生成的

HTML5与CSS3也能画出饼图

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

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

然而，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();