<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
body{
padding:0;
margin:0;
}
ul li{
list-style: none;
}
.wrap{
max-650px;
margin:0 auto;
}
/*礼物领取方式*/
.tabBox{
background:#fff;
}
.tabBox .menu{
display:-webkit-box;
display:-moz-box;
display:box;
}
.tabBox .menu li{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
height:50px;
line-height:50px;
text-align:center;
border-bottom:1px solid #ccc;
font-size:16px;
}
.tabBox .menu li:first-child{
border-right:1px solid #ccc;
}
.tabBox .menu li.active{
border-bottom:none;
border-top:1px solid #06bd01;
color:#06bd01;
}
.tabBox .conBox{
background:#fff;
}
.tabBox .conBox li{
100%;
float:left;
display:none;
text-align:center;
}
.tabBox .conBox li.show{
display:block;
}
.tabBox .conBox .curcal{
border-top:2px solid #ccc;
}
.tabBox .conBox .curcal>div{
float:left;
33.33%;
position:relative;
}
.tabBox .conBox .curcal>div canvas{
display:block;
margin:-25px auto 0;
background-color:#f5f5f5;
border-radius:50%;
}
.tabBox .conBox .txt{
text-align:center;
}
.tabBox .conBox .txt a{
float:left;
height:26px;
line-height:26px;
33.33%;
margin-bottom:20px;
color:#999;
font-size:16px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="tabBox mb_15">
<ul class="menu">
<li class="active">先到先得</li>
<li>拼手气领取</li>
</ul>
<ul class="conBox mb_15 clearfix">
<li class="show">
<div style="height:40px;"></div>
<div class="curcal clearfix" style="height:40px;">
<div>
<canvas width="50" height="50" class="canvas1"></canvas>
</div>
<div>
<canvas width="50" height="50" class="canvas2"></canvas>
</div>
<div>
<canvas width="50" height="50" class="canvas3"></canvas>
</div>
</div>
<div class="txt">
<a>留言并付款</a>
<a>分享给朋友</a>
<a>成功领取</a>
</div>
</li>
</ul>
</div>
</div>
<script>
window.onload= function () {
var $canvas1 = document.getElementsByTagName('canvas')[0];
var $canvas2 = document.getElementsByTagName('canvas')[1];
var $canvas3 = document.getElementsByTagName('canvas')[2];
var gd1 = $canvas1.getContext('2d');
var gd2 = $canvas2.getContext('2d');
var gd3 = $canvas3.getContext('2d');
canvasTab(gd1, -Math.PI / 3, 1);
canvasTab(gd2, Math.PI / 3, 2);
canvasTab(gd3, Math.PI, 3);
};
function canvasTab(obj,num1,num2){
/*填充色*/
obj.beginPath();
obj.lineWidth = 7;
obj.fillStyle = '#fff';
obj.arc(25, 25, 16, -Math.PI, Math.PI, false);
obj.fill();
obj.closePath();
/*画弧*/
obj.beginPath();//有开始
obj.lineWidth = 7;
obj.strokeStyle = '#ccc';
obj.arc(25, 25, 20, -Math.PI, num1, false);
obj.stroke();
obj.closePath();//就要有结束
/*画字*/
obj.beginPath();
obj.font = '16px a';
obj.fillStyle = "#000";
obj.textBaseline = 'middle';
obj.textAlign = 'center';
obj.fillText(num2, 25, 25);
obj.closePath();
}
</script>
</body>
</html>