html canvas直线进度条,HTML5 canvas圆形进度条的实现（含代码）

圆进度条

window.chart=function(ID){varcanvas=document.getElementById(ID);varctx=canvas.getContext("2d");//画布宽高

varW=canvas.width;varH=canvas.height;//度角

vardegrees= 0;varnew_degrees= 0;//差额

vardifference= 0;vartext,text_w;//文字

varR=W

varoutW=parseInt(R/ 14);//环宽度

varoutR=(R/2) -outW;//环半径=canvas宽度半径 -外环宽度

var$this = this;

console.log("canvas宽度:"+R);

console.log(outW);

console.log(outR);

$this.ratePieNoAnimation= function(number){

degrees=360*number/100;

//园弧底图

ctx.clearRect(0,0,W,H);//先清画布

ctx.beginPath();

ctx.strokeStyle="green";//园弧线的宽度

ctx.lineWidth=outW;

ctx.arc(W/ 2, H/ 2, outR,0, Math.PI* 2,false);

ctx.stroke();//圆弧动画

varr=degrees*Math.PI/ 180;

ctx.beginPath();

ctx.strokeStyle= "#994746";

ctx.lineWidth=outW;//弧将从最顶端开始

ctx.arc(W/ 2, H/ 2, outR,0 - 90 *Math.PI/ 180, r- 90 *Math.PI/ 180,false);

ctx.stroke();//文字添加

ctx.fillStyle= "#63d2ef";

ctx.shadowColor= "#eee";

ctx.font= "bold" +R/ 6 + "px hanyi";

text=Math.floor(degrees/ 360 * 100)+ "%";

text_w=ctx.measureText(text).width;

ctx.fillText(text, W/ 2 -text_w/ 2, H/ 2 +R/ 10);

};

$this.ratePie= function(number){vari=0;vartime=setInterval(function(){if( i==number){

clearInterval(time);

}else{

number>0 ?i++: i--;

}

$this.ratePieNoAnimation(i);if( i>100 ||i

$this.ratePieNoAnimation(number);

clearInterval(time);

}

},2000 /(number> 0 ?number :-number));

};

}newchart("yuan").ratePie(50);