HTML5绘制饼图实例（一）

阅读更多

    HTML5引入Canvas元素，用于图形的绘制，我们可以仅仅基于HTML和JavaScript就能绘制出原本可能需要第三方组件的图形。因为做数据统计比较多，那么就用画饼图做为示例来说明。之前绘制饼图可以使用JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart，这些组件的使用之前也介绍过，可以参阅以前的文章。本部分仅来介绍HTML5的Canvas绘制饼图。
    饼图的基础是原型，那么我们先来看看如何使用Canvas绘制原型。当然这很简单了，首先编写HTML代码，如下：

    
    


	您的浏览器暂不支持Canvas

    HTML仅仅定义显示的内容，如何画图还要借助JavaScript了，这也很简单，我们来看一下：

    我们就在html文件中使用
    解释一下：定义了两个全局变量，color和data用于放置数据和对应的扇形区域的颜色。drawCircle()方法中加入循环，就是根据数据和颜色来进行自动填充，此时就必须使用moveTo()方法来每次回到圆心了，否则就不是扇形了，可以自行去测试。然后对arc方法进行调整，可以发现，第四，第五参数调整，就是扇形其实位置和结束位置了，这里我们定义的startPoint是0，就是从左水平点开始画图，为顺时针方向。画图的弧长是按百分数计算，也就是data数组中的每一项除以100得出的结果，当然data数组本身的和也是100。
    之后进行扇形区域的填充，使用fill()方法即可，我们看到如下结果：

    到此为止，我们就画好扇形了，细心的人会发现，我们每个扇形连接处都有一道白线，产生的这个问题我们之前说过，就是strokeStyle和stroke方法这里没有用，那么没有对画线的路径进行填充，而画扇形必须要回圆心，那么就需要对画线的路径进行相应填充，在相应位置加上这两个方法，白线就没有了。
    最后，我们要求，从正上方逆时针开始绘图，该如何做？将起始位置定义为1.5PI，arc方法最后一个参数为true，每次的增量不能加，要减，就可以了，代码修改为：

    我们再来看看效果：

    Canvas绘制饼图掌握这么多基本就够了，可以处理常见的数据统计了，只要注意这里我们扇形划分是按照百分比进行的，那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单，调整几个参数即可。
    第二部分将结合CSS3来制作一个完整的示例。欢迎交流，本示例系作者的实践探究，希望对使用者有用。

• 
• 大小: 14.5 KB

• 
• 大小: 31.9 KB

• 
• 大小: 34.5 KB

• 
• 大小: 34.7 KB

• 查看图片附件