進度條效果的實現

var canvas=document.getElementById('jindu');
context=canvas.getContext('2d');
var rad=Math.PI*2/100;
//將360度分成100份，那麼每一份就是rad度
//繪製外圈
function whiteCircle(x,y,color){
	context.save();
	context.beginPath();
	context.arc(x,y,40,0,2*Math.PI,false);
	//畫筆中心，半徑，起始角度，結束角度，false（逆時針）
	context.strokeStyle=color;
	context.lineWidth=15;
	context.stroke();
	context.closePath();
	context.restore();
}


//根據速度繪製進度圈
function progress(x,y,color,n){
	context.save();
	context.beginPath();
	context.arc(x,y,40,1.5*Math.PI,1.5*Math.PI+n*rad,false);
	context.strokeStyle=color;
	context.lineWidth=15;
	context.stroke();
	context.closePath();
	context.restore();
}

//繪製百分比文字
function text(x,y,n){
	context.save();
	context.strokeStyle='#fff';
	context.font='12px Arial';
	context.strokeText(n.toFixed(0)+'%',x-8,y);
	//context.stroke();
	context.restore();
}

//定義速度
var speed=0.1;
var speed1=0;
var back=window.setInterval(function(){
	context.clearRect(0,0,canvas.width,canvas.height);//清理之前的畫筆
        whiteCircle(canvas.width/8,canvas.height/3,"#24294f");//繪製外圈
        progress(canvas.width/8,canvas.height/3,"#ae81e6",speed);//根據速度繪製進度圈
        text(canvas.width/8,canvas.height/3,speed);//繪製百分比文字
        speed+=0.1;
	speed1+=0.008;
	if(speed>100) {speed=0;
		// window.clearInterval(back);
	}
},10);

var canvas=document.getElementById('jindu');
context=canvas.getContext('2d');
var rad=Math.PI*2/100;
//將360度分成100份，那麼每一份就是rad度
/繪製外圈
function whiteCircle(x,y,color){
	context.save();
	context.beginPath();
	context.arc(x,y,40,0,2*Math.PI,false);
	//畫筆中心，半徑，起始角度，結束角度，false（逆時針）
	context.strokeStyle=color;
	context.lineWidth=15;
	context.stroke();
	context.closePath();
	context.restore();
}
//繪製百分比文字
function text(x,y,n){
	context.save();
	context.strokeStyle='#fff';
	context.font='12px Arial';
	context.strokeText(n.toFixed(0)+'%',x-8,y);
	//context.stroke();
	context.restore();
}

//繪製紅色進度
function redCircle(x,y,color){
	context.save();
	context.beginPath();
	context.arc(x,y,40,(1.5+speed1)*Math.PI,(0+speed1)*Math.PI,false);//畫筆中心，半徑，起始角度，結束角度，false（逆時針）
	context.strokeStyle=color;
	context.lineWidth=15;
	context.stroke();
	context.closePath();
	context.restore();
}

//速度
var speed=0.1;
var speed1=0;
var back=window.setInterval(function(){
	context.clearRect(0,0,canvas.width,canvas.height);//清理之前的畫筆
whiteCircle(canvas.width/2.79,canvas.height/3,"#30203b");
//根據速度繪製進度圈
	redCircle(canvas.width/2.79,canvas.height/3,"#d4315e");
text(canvas.width/2.79,canvas.height/3,speed);
speed+=0.1;
	speed1+=0.008;
	if(speed>25) {speed=0;
		//window.clearInterval(back);
	}
},10);