H5canvas 5：转动的进度条

H5canvas 5：转动的进度条

进度条可以用css,jQuery实现，同样的，canvas也能实现它

以上是我的网页实现。

js代码：

let can=null;
let ctx=null;
let parts=9;
let secs=0;
let rotate=0;
let timeHandle=null;
window.function(){
	const drawBtn=document.getElementById("drawBtn");
	const startBtn=document.getElementById("startBtn");
	const stopBtn=document.getElementById("stopBtn");
	can=document.getElementById("mycan");
	ctx=can.getContext("2d");
    drawText();
    drawWheel(parts,0);
    //重绘
    drawBtn.onclick=function(){
    	parts=document.getElementById("btnGroup").value;
    	ctx.clearRect(0,0,can.width,can.height);
    	drawText();
    	drawWheel(parts,0);
    }
    //开始
    startBtn.onclick=function(){
    	if(!timeHandle){
  		    animate_request();
            times=setInterval(timeContral,1000);
    	}
    	
    }
    //停止
    stopBtn.onclick=function(){
    	if(timeHandle){
    		cancelAnimationFrame(timeHandle);
    		clearInterval(times);
    		timeHandle=null;
    		times=null;
    		secs=0
    	}
    }
}
//渐变字
function drawText(){
	const g=ctx.createLinearGradient(0,0,can.width,0);
	g.addColorStop(0,"green");
	g.addColorStop(0.5,"red");
	g.addColorStop(1,"blue");
	ctx.font="20px 微软雅黑";
	ctx.textAlign="center";
	ctx.fillStyle=g;
	ctx.fillText("Canvas动画：转动的进度条",can.width/2,50);
	ctx.fillText("运行时间："+(secs)+"秒",can.width/2,80);
}
//画进度条
function drawWheel(n,rotate){
	const x0=can.width/2;
	const y0=can.height/2;
	const r=100;
	const angle=4*Math.PI/n/3;	
	let i=0;
	//同心圆
		ctx.beginPath();
		ctx.fillStyle="#ccc";
		ctx.arc(x0,y0,101,0,2*Math.PI,true);
		ctx.fill();
		ctx.closePath();
	for(i=0;i

html代码：

		

			
				9
				8
				7
				6
				5
				4
				3
				2
			
			
			
			
		

css代码：

@charset "utf-8";
body{
	margin: 0;
	padding: 0;
	text-align: center;
}
#mycan{
	border: 1px solid black;
}

可以使用这个进度条实现网页预加载，也是一种比较好看的方式。