进度条效果的实现

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);