<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条DEMO演示</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;background-color:#000;}
#can{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="can"></div>
<script>
(function(){
function Circle(params){
this.div = document.getElementById(params.el)
this.canvas = document.createElement("canvas");
if (!this.canvas.getContext) {
throw new Error("浏览器不支持");
return
}
this.canvas.width = this.div.clientWidth;
this.canvas.height = this.div.clientHeight;
this.div.appendChild(this.canvas);
this.context = this.canvas.getContext('2d');
this.cd = 0;
this.radius = this.div.clientHeight/2;
this.bgline = params.bgline || 10;
this.bglineColor = params.bglineColor || '#fff';
this.line = params.line || 15;
this.lineColor = params.lineColor || "#fff";
this.color = params.color || "#000";
this.font = params.font || "40px Arial";
this.speed = params.speed;
this.total = params.total;
this.centerX = this.div.clientWidth/2;
this.centerY = this.div.clientHeight/2;
this.rad = Math.PI*2/100;
this.getid=null;
}
Circle.prototype = {
init: function(){
var _this = this;
_this.getid = window.requestAnimationFrame(function(){
_this.init();
});
_this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
_this.whiteCircle();
_this.text(this.cd);
_this.blueCircle(this.cd);
this.cd += _this.speed;
if(_this.cd > _this.total) {
_this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
_this.whiteCircle();
_this.text(_this.total);
_this.blueCircle(_this.total);
cancelAnimationFrame(_this.getid)
}
},
blueCircle: function(n){
this.context.save();
this.context.beginPath();
this.context.scale(0.9,0.9);
this.context.lineWidth = this.line;
this.context.strokeStyle = this.lineColor;
this.context.translate(this.centerX*0.1,this.centerY*0.1);
this.context.arc(this.centerX, this.centerY, this.radius , -Math.PI/2, -Math.PI/2 +n*this.rad, false);
this.context.stroke();
this.context.closePath();
this.context.restore();
},
whiteCircle: function(){
this.context.save();
this.context.beginPath();
this.context.scale(0.9,0.9);
this.context.translate(this.centerX*0.1,this.centerY*0.1);
this.context.lineWidth = this.bgline;
this.context.strokeStyle = this.bglineColor;
this.context.arc(this.centerX, this.centerY, this.radius , 0, Math.PI*2, false);
this.context.stroke();
this.context.closePath();
this.context.restore();
},
text: function(n){
this.context.save();
this.context.strokeStyle = this.color;
this.context.fillStyle = this.color;
this.context.font = this.font;
this.context.textAlign = 'center';
this.context.fillText(n.toFixed(0)+"%", this.centerX, this.centerY+10);
this.context.stroke();
this.context.restore();
}
};
window.circle = function(a,b,c){
return new Circle(a,b,c);
};
}())
var cc = circle({
el:'can',
speed: 3,
total:50,
bgline:10,
bglineColor: '#ccc',
line: 10,
lineColor: 'red',
color:'#fff',
font:'40px Arial'
});
cc.init();
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
