HTML5绘制饼图实例（-）
HTML5引⼊Canvas元素，⽤于图形的绘制，我们可以仅仅基于HTML和JavaScript就能绘制出原本可能需要第三⽅组件的图形。因为做数据统计⽐较多，那么就⽤画饼图做为⽰例来说明。之前绘制饼图可以使⽤JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart，这些组件的使⽤之前也介绍过，可以参阅以前的⽂章。本部分仅来介绍HTML5的Canvas绘制饼图。
饼图的基础是原型，那么我们先来看看如何使⽤Canvas绘制原型。当然这很简单了，⾸先编写HTML代码，如下：
Html代码
1. <!DOCTYPE html>
2. <html>
3. <head>
4.    <meta charset="UTF-8" />
5.    <title>HTML5 Demo</title>
6. </head>
7. <body>
8.    <canvas id="circle" width="400" height="300">您的浏览器暂不⽀持Canvas</canvas>
9. </body>
10. </html>
HTML仅仅定义显⽰的内容，如何画图还要借助JavaScript了，这也很简单，我们来看⼀下：
Js代码
1. <script type="text/javascript">
2. function drawCircle(){
3.    var canvas = ElementById("circle");
4.    var ctx = Context("2d");
5.    ctx.fillStyle = '#77D1F6';
6.    ctx.beginPath();
7.    veTo(200,150);
8.    ctx.arc(200,150,150,0,Math.PI*2,false);
9.    ctx.fill();
10. }
11. drawCircle();
12. </script>
我们就在html⽂件中使⽤<script>标签来写即可，下⾯来解释这段代码。⾸先通过getElementById()⽅法获取到我们的 canvas元素，然后从canvas中获取上下⽂环境，我们绘制的是2d图形，紧接着是填充的效果，我们定义⼀种颜⾊来填充。可能这⾥有⼈想到了 strokeStyle，这个是绘制路径的颜⾊，⽽不是填充的颜⾊了。然后调⽤beginPath()开始绘制，⾸先将画笔移动到圆⼼处，就是从圆⼼开始绘制
路径，当然这句可以不加，画圆的话不需要每次都回圆⼼，但是画饼图就需要了了，所以为以后考虑，加上也没事。这⾥的圆⼼坐标是
（200，150），就是距离左上⾓向右200个像素，向下150个像素的位置。
之后的arc⽅法就是画圆的了。参数的含义为：前两个是圆⼼坐标，上⾯解释过了。第三个参数是半径⼤⼩，我们定义canvas的宽度为300像素，这⾥⽤半径就是300的⼀半，第四个参数是圆周起始位置，这就很有说头了，也涉及到⼀些⼏何知识，我们来看⼀张图：
0 PI就是起始位置了，沿顺时针路线，分别是0.5 PI（正下⽅），1 PI和1.5 PI（正上⽅），这个为我们以后画饼图提供了扇形范围的依据。
第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，这没什么好说的，完全的数学知识。第六个参数是个布尔值，就是确定是顺时针还是逆时针，这⾥false是顺时针。基础的内容就说完了，我们来看⼀下效果：
我们可以使⽤FireFox，Chrome，Safari或Opera来查看效果，IE只会出⼀⾏字。画圆很简单，那么扇形就是要计算弧长的图形，扇形组合成⼀个整圆，就是我们要的饼图了。我们⼀步⼀步来，开始画扇形。做数据统计时，我们喜欢⽤百分⽐，那么将整个圆周视为100份，我们计算百分数。将 JavaScript代码调整如下：
Js代码
1. <script type="text/javascript">
2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
html5颜代码3. var data = [5,30,15,30,20];
4.
5. function drawCircle(){
6.    var canvas = ElementById("circle");
7.    var ctx = Context("2d");
8.    var startPoint=0;
9.    for(var i=0;i<data.length;i++){
10.        ctx.fillStyle = color[i];
11.        ctx.beginPath();
12.        veTo(200,150);
13.        ctx.arc(200,150,150,startPoint,startPoint+Math.PI*2*(data[i]/100),false);
14.        ctx.fill();
15.        startPoint+=Math.PI*2*(data[i]/100);
16.    }
17. }
18. drawCircle();
19. </script>
解释⼀下：定义了两个全局变量，color和data⽤于放置数据和对应的扇形区域的颜⾊。drawCircle()⽅法中加⼊循环，就是根据数据和颜⾊来进⾏⾃动填充，此时就必须使⽤moveTo()⽅法来每次回到圆⼼了，否则就不是扇形了，可以⾃⾏去测试。然后对arc⽅法进⾏调整，可以发现，第四，第五参数调整，就是扇形其实位置和结束位置了，这⾥我们定义的startPoint是0，就是从左⽔平点开始画图，为顺时针⽅向。画图的弧长是按百分数计算，也就是data数组中的每⼀项除以100得出的结果，当然data数组本⾝的和也是100。
之后进⾏扇形区域的填充，使⽤fill()⽅法即可，我们看到如下结果：
到此为⽌，我们就画好扇形了，细⼼的⼈会发现，我们每个扇形连接处都有⼀道⽩线，产⽣的这个问题我们之前说过，就是strokeStyle和stroke ⽅法这⾥没有⽤，那么没有对画线的路径进⾏填充，⽽画扇形必须要回圆⼼，那么就需要对画线的路径进⾏相应填充，在相应位置加上这两个⽅法，⽩线就没有了。
最后，我们要求，从正上⽅逆时针开始绘图，该如何做？将起始位置定义为1.5PI，arc⽅法最后⼀个参数为true，每次的增量不能加，要减，就可以了，代码修改为：
Js代码
1. <script type="text/javascript">
2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
3. var data = [5,30,15,30,20];
4.
5. function drawCircle(){
6.    var canvas = ElementById("circle");
7.    var ctx = Context("2d");
8.    var startPoint = 1.5 * Math.PI;
9.    for(var i=0;i<data.length;i++){
10.        ctx.fillStyle = color[i];
11.        ctx.strokeStyle = color[i];
12.        ctx.beginPath();
13.        veTo(200,150);
14.        ctx.arc(200,150,150,startPoint,startPoint-Math.PI*2*(data[i]/100),true);
15.        ctx.fill();
16.        ctx.stroke();
17.        startPoint -= Math.PI*2*(data[i]/100);
18.    }
19. }
20. drawCircle();
21. </script>
我们再来看看效果：
Canvas绘制饼图掌握这么多基本就够了，可以处理常见的数据统计了，只要注意这⾥我们扇形划分是按照百分⽐进⾏的，那么你可以根据⾃⼰的需求灵活处理。对于其实位置和⽅向的调整也很简单，调整⼏个参数即可。
将结合CSS3来制作⼀个完整的⽰例。欢迎交流，本⽰例系作者的实践探究，希望对使⽤者有⽤。
⼤⼩: 14.5 KB
⼤⼩: 31.9 KB
⼤⼩: 34.5 KB
⼤⼩: 34.7 KB

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。