canvas制作圆形动态加载进度实例

window.onload=function(){
	var loading=document.getElementById('loading');
	var context=loading.getContext('2d');
	var num=parseInt(Math.random()*100)/100;//模拟获取进度值
	var temp=0;//当前进度值
	var time=1000;//动画总时长
	var step=1000*0.01/num;//动画步长
	function loadanimate(){
		context.beginPath();
		context.arc(150,150,150,0,2*Math.PI);
		context.fillStyle='#ccc';
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle='#fff';
		context.fill();
		context.fillStyle='#ccc';
		context.font="110px 微软雅黑 ";
		if(temp>0.09){//调整文本居中
			context.fillText(parseInt(temp*100)+"%",45,188);
		}else{
			context.fillText(" "+parseInt(temp*100)+"%",45,188);
		}
		context.save();

		context.beginPath();
		context.rect(0,300*(1-temp),300,300*temp);
		context.clip();

		context.beginPath();
		context.arc(150,150,150,0,2*Math.PI);
		context.fillStyle='aquamarine';
		context.fill();
		context.beginPath();
		context.arc(150,150,130,0,2*Math.PI);
		context.fillStyle='#fff';
		context.fill();
		context.fillStyle='aquamarine';
		context.font="110px 微软雅黑 ";
		if(temp>0.09){
			context.fillText(parseInt(temp*100)+"%",45,188);
		}else{
			context.fillText(" "+parseInt(temp*100)+"%",45,188);
		}
		context.restore();
		setTimeout(function(){
			if(num>temp){
				temp+=0.01;
				loadanimate();
			}
		},step);
	}
	loadanimate();
};