前端ABC<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul{
list-style: none;
overflow: hidden;
width: 1200px;
margin: 0 auto;
}
li{
width: 300px;
height: 300px;
float: left;
}
body{
background-color: #333
}
</style>
</head>
<body>
<ul id="canvas">
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>70%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>60%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>30%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>80%</span>
</li>
</ul>
<canvas id="cvs"></canvas>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var canUl=document.getElementById("canvas");
var li=canUl.getElementsByTagName("li");
var can=canUl.getElementsByTagName("canvas");
var pecent=canUl.getElementsByTagName("span");
var can_arr=[];
function Cavas_pecent(json){
this.w=json.w;
this.h=json.h;
this.timer=null;
this.deg=0;
this.new_deg=json.new_deg,
this.obj=json.obj;
this.color=json.color;
this.stroke_color=json.stroke_color;
this.pecent_f=json.pecent_f;
this.lineWidth=json.lineWidth;
this.bg_color=json.bg_color;
}
Cavas_pecent.prototype.draw = function() {
var txt=this.deg+"%";
this.obj.lineCap="round";
this.obj.lineWidth=this.lineWidth;
this.obj.strokeStyle = this.stroke_color;
this.obj.beginPath();
this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,this.deg/100*Math.PI*2);
this.obj.fillStyle="#fff";
this.obj.font="25px Arial";
this.obj.fillText(txt , 150 - this.obj.measureText(txt).width/2 ,150);
this.obj.stroke();
}
Cavas_pecent.prototype.drawBg = function(){
this.obj.beginPath();
this.obj.strokeStyle=this.bg_color;
this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,100*Math.PI*2);
this.obj.stroke();
this.obj.save();
return this;
}
Cavas_pecent.prototype.go_draw = function(){
var _this=this;
_this.timer=setInterval(function(){
if(_this.deg==_this.pecent_f){
clearInterval(_this.timer);
}
else{
_this.deg++;
_this.obj.clearRect(0,0,300,300);
_this.drawBg().draw()
}
},30)
}
for(var i=0;i<can.length;i++)
{
can_arr[i]=new Cavas_pecent({
w:li[i].offsetWidth,
h:li[i].offsetHeight,
obj:can[i].getContext("2d"),
color:"#a24565",
stroke_color:"#a24565",
pecent_f:parseInt(pecent[i].innerText),
lineWidth:5,
bg_color:"#fff"
})
can_arr[i].go_draw();
}
}
</script>
欢迎分享本文，转载请保留出处：前端ABC » Canvas百分比动画