应用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>

应用Canvas实现圆环形进度条

标签：

原文地址：http://my.oschina.net/brant/blog/499957