应用Canvas实现圆环形进度条

摘要: Canvas绘制圆环，使用定时器可动态控制圆环的百分比，非常灵活。

调用方式如：timer("createCanvas",0,20,100); 表示使圆环（id为createCanvas）从0动态填充至20%，每隔0.1秒填充1%。

定时器函数

/*
* 执行定时任务
* id：画布id
* start：初始百分比
* end：结束百分比
* interval：时间间隔
*/
function timer(id,start,end,interval){
window.setTimeout(function(){
circle(id,start/100);
start++;
if(start<end+1){
timer(id,start,end,interval);
}
},interval);
}

圆环绘制函数

function circle(id,percent){
var p=(percent*100).toFixed(0);
var c=document.getElementById(id);
var cxt=c.getContext("2d");
//生成圆形（底圆）
cxt.fillStyle="#D0D0D0";
cxt.beginPath();
cxt.moveTo(75, 75);
cxt.arc(75,75,70,0,Math.PI*2,false);
cxt.closePath();
cxt.fill();
//生成扇形
cxt.fillStyle="#0268BD";
cxt.beginPath();
cxt.moveTo(75, 75);
if(percent==1){
cxt.arc(75,75,70,0,Math.PI*2,false);
}else if(percent==0){
cxt.arc(75,75,70,0,0,true);
}else{
cxt.arc(75,75,70,Math.PI,Math.PI+Math.PI*2*percent,false);
}
cxt.closePath();
cxt.fill();
//生成圆形（上层园）
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.moveTo(75, 75);
cxt.arc(75,75,50,0,Math.PI*2,false);
cxt.closePath();
cxt.fill();
//生成中间百分比文字
cxt.font="20px arial";
cxt.fillStyle="#000000";
cxt.fillText(p+"%",55,75);
//  cxt.fillText("0%",160,75);
}

只要在html中加入Canvas标签即可，如：

<canvas style="float:left;" id="step1Canvas" width='150' height='150' >
您的浏览器不支持HTML5，请尝试其他浏览器！
</canvas>