Html代码
- <div id="section1">
- <div class="title">HTML5</div>
- <div class="subTitle">HTML5 是下一代的HTML,包含诸多新特性,比如绘制图形的canvas元素。</div>
- <div class="piechart">
- <canvas id="piechart1" width="225" height="168"></canvas>
- </div>
- </div>
下面就是确定样式和绘制饼图了,只需调整圆心位置即可,将data数组放于方法内,我们要设置三组data值,而color就是一组:
Css代码
- .piechart{
- border:1px solid red;
- margin:5px;
- height:170px;
- }
Js代码
- <script type="text/javascript">
- var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"];
- function drawCircle(){
- var data = [5,30,15,30,20];
- var canvas = document.getElementById("piechart1");
- 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,84);
- ctx.arc(112,84,84,startPoint,startPoint-Math.PI*2*(data[i]/100),true);
- ctx.fill();
- ctx.stroke();
- startPoint -= Math.PI*2*(data[i]/100);
- }
- }
- drawCircle();
- </script>
我们来看看绘制好饼图后的效果:
下面放置对饼图的介绍,也很简单,我们来看一下,将下面的代码放置到piechart的div下面:
Html代码
- <div class="description">
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(119, 209, 246); "></div>
- <div class="item-text">20% Opera</div>
- </div>
- <div class="scroll-item item-odd">
- <div class="rect" style="background-color: rgb(44, 168, 224); "></div>
- <div class="item-text">30% FireFox</div>
- </div>
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(54, 102, 176); "></div>
- <div class="item-text">15% Safari</div>
- </div>
- <div class="scroll-item item-odd">
- <div class="rect" style="background-color: rgb(47, 54, 143); "></div>
- <div class="item-text">30% Chrome</div>
- </div>
- <div class="scroll-item item-even">
- <div class="rect" style="background-color: rgb(39, 37, 95); "></div>
- <div class="item-text">5% IE</div>
- </div>
- </div>
其中涉及到的CSS样式为:
Css代码
- .description{
- border:1px solid #CCCCCC;
- border-color: #636263 #464647 #A1A3A5;
- margin:10px 5px;
- height:165px;
- border-radius: 4px;
- }
- .scroll-item {
- position: relative;
- width: 100%;
- height: 32px;
- border-bottom:1px solid gray;
- cursor: pointer;
- }
- .item-even {
- background-color: #E7E8EC;
- }
- .item-odd {
- background-color: #E0ECF6;
- }
- .rect {
- float: left;
- margin-top: 5px;
- margin-left: 5px;
- width: 20px;
- height: 20px;
- border-radius: 3px;
- }
- .item-text{
- margin-left: 5px;
- height: 100%;
- float: left;
- font-size: 14px;
- font-family: 微软雅黑;
- vertical-align: middle;
- display: inline-block;
- line-height: 30px;
- }
其中没什么可多说的,就是设置了一下奇偶行的不同颜色,因为我们都是定死的,所以就这么来做了,比较简单,剩下就是设置长宽,圆角的样式了,不是很难,现在我们得到了这样的效果:
还有最后的一个按钮了,也很简单了,我们如下设置,接着上面的代码,编写:
Html代码
- <div class="button]<span class="buttonText">查看详情 ></span>[/align]
然后设置样式:
Css代码
- .button{
- border:1px solid #cccccc;
- cursor:pointer;
- margin:10px 5px;
- height:40px;
- text-align:center;
- border-radius: 4px;
- border-color: #636263 #464647 #A1A3A5;
- text-shadow: 0 1px 1px #F6F6F6;
- background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6));
- }
- .buttonText{
- position:relative;
- font-weight:bold;
- top:10px;
- font-family:微软雅黑;
- color:#58595B;
- }
现在我们就完成了一组了,得到如下的效果:
比葫芦画瓢完成剩下两组,也很简单了,最后我们得到:
那么,这个例子也就做完了,主要是介绍利用Canvas绘制饼图,然后结合CSS制作一个小demo,用于数据展示用,对浏览器要求比较高,而且基本排除了IE,暂时也就不太适合普通应用,在特定浏览器的应用中(比如ipad中的safari等)使用较好。
至此,本部分就介绍完了。欢迎交流,希望对使用者有用。更多精彩内容,稍后为您呈现。