HTML5绘制饼图实例（二）

Html代码

1. <div id="section1">  
2.     <div class="title">HTML5</div>  
3.     <div class="subTitle">HTML5 是下一代的HTML，包含诸多新特性，比如绘制图形的canvas元素。</div>  
4.     <div class="piechart">  
5.         <canvas id="piechart1" width="225" height="168"></canvas>  
6.     </div>  
7. </div>  

    下面就是确定样式和绘制饼图了，只需调整圆心位置即可，将data数组放于方法内，我们要设置三组data值，而color就是一组：

Css代码

1. .piechart{  
2.     border:1px solid red;  
3.     margin:5px;  
4.     height:170px;  
5. }  

Js代码

1. <script type="text/javascript">  
2. var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];  
3.   
4. function drawCircle(){  
5.     var data = [5,30,15,30,20];  
6.     var canvas = document.getElementById("piechart1");  
7.     var ctx = canvas.getContext("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.         ctx.moveTo(112,84);  
14.         ctx.arc(112,84,84,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>  

    我们来看看绘制好饼图后的效果：

    下面放置对饼图的介绍，也很简单，我们来看一下，将下面的代码放置到piechart的div下面：

Html代码

1. <div class="description">  
2.                 <div class="scroll-item item-even">  
3.                     <div class="rect" style="background-color: rgb(119, 209, 246); "></div>  
4.                     <div class="item-text">20% Opera</div>  
5.                 </div>  
6.                 <div class="scroll-item item-odd">  
7.                     <div class="rect" style="background-color: rgb(44, 168, 224); "></div>  
8.                     <div class="item-text">30% FireFox</div>  
9.                 </div>  
10.                 <div class="scroll-item item-even">  
11.                     <div class="rect" style="background-color: rgb(54, 102, 176); "></div>  
12.                     <div class="item-text">15% Safari</div>  
13.                 </div>  
14.                 <div class="scroll-item item-odd">  
15.                     <div class="rect" style="background-color: rgb(47, 54, 143); "></div>  
16.                     <div class="item-text">30% Chrome</div>  
17.                 </div>  
18.                 <div class="scroll-item item-even">  
19.                     <div class="rect" style="background-color: rgb(39, 37, 95); "></div>  
20.                     <div class="item-text">5% IE</div>  
21.                 </div>  
22.             </div>  

    其中涉及到的CSS样式为：

Css代码

1. .description{  
2.     border:1px solid #CCCCCC;  
3.     border-color: #636263 #464647 #A1A3A5;  
4.     margin:10px 5px;  
5.     height:165px;  
6.     border-radius: 4px;  
7. }  
8. .scroll-item {  
9.     position: relative;  
10.     width: 100%;  
11.     height: 32px;  
12.     border-bottom:1px solid gray;  
13.     cursor: pointer;  
14. }  
15. .item-even {  
16.     background-color: #E7E8EC;  
17. }  
18.   
19. .item-odd {  
20.     background-color: #E0ECF6;  
21. }  
22. .rect {  
23.     float: left;  
24.     margin-top: 5px;  
25.     margin-left: 5px;  
26.     width: 20px;  
27.     height: 20px;  
28.     border-radius: 3px;  
29. }  
30. .item-text{  
31.     margin-left: 5px;  
32.     height: 100%;  
33.     float: left;  
34.     font-size: 14px;  
35.     font-family: 微软雅黑;  
36.     vertical-align: middle;  
37.     display: inline-block;  
38.     line-height: 30px;  
39. }  

    其中没什么可多说的，就是设置了一下奇偶行的不同颜色，因为我们都是定死的，所以就这么来做了，比较简单，剩下就是设置长宽，圆角的样式了，不是很难，现在我们得到了这样的效果：

    还有最后的一个按钮了，也很简单了，我们如下设置，接着上面的代码，编写：

Html代码

1. <div class="button]<span class="buttonText">查看详情   ></span>[/align]  

    然后设置样式：

Css代码

1. .button{  
2.     border:1px solid #cccccc;  
3.     cursor:pointer;  
4.     margin:10px 5px;  
5.     height:40px;  
6.     text-align:center;  
7.     border-radius: 4px;  
8.     border-color: #636263 #464647 #A1A3A5;  
9.     text-shadow: 0 1px 1px #F6F6F6;  
10.     background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);  
11.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));  
12. }  
13. .buttonText{  
14.     position:relative;  
15.     font-weight:bold;  
16.     top:10px;  
17.     font-family:微软雅黑;  
18.     color:#58595B;  
19. }  

    现在我们就完成了一组了，得到如下的效果：

    比葫芦画瓢完成剩下两组，也很简单了，最后我们得到：

    那么，这个例子也就做完了，主要是介绍利用Canvas绘制饼图，然后结合CSS制作一个小demo，用于数据展示用，对浏览器要求比较高，而且基本排除了IE，暂时也就不太适合普通应用，在特定浏览器的应用中（比如ipad中的safari等）使用较好。
     至此，本部分就介绍完了。欢迎交流，希望对使用者有用。更多精彩内容，稍后为您呈现。

 

转载于:https://www.cnblogs.com/happily/archive/2011/11/21/2256838.html