码迷,mamicode.com
首页 > 其他好文 > 详细

应用Canvas实现圆环形进度条

时间:2015-09-01 12:46:15      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:

      调用方式如: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!