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<n;i++){
	    //进度条		
		ctx.beginPath();
		ctx.fillStyle="rgba(0,0,255,"+(30*i+100)/400+")";
		ctx.arc(x0,y0,100,i*angle+rotate,(i+1)*angle+rotate);
		ctx.lineTo(x0,y0);
		ctx.closePath();
		ctx.fill();
		ctx.beginPath();
		ctx.fillStyle="white";
		ctx.arc(x0,y0,85,0,2*Math.PI,true);
		ctx.fill();
		ctx.closePath();
		
	}

}
//setTimeout
function animate_timeout(){
	rotate=(rotate+2*Math.PI/100)%(2*Math.PI);
	ctx.clearRect(0,0,can.width,can.height);
	drawText();
	drawWheel(parts,rotate);
	timeHandle=setTimeout(animate_timeout,1000/60);
}
//setInterval
function animate_interval(){
	rotate=(rotate+2*Math.PI/100)%(2*Math.PI);
	ctx.clearRect(0,0,can.width,can.height);
	drawText();
	drawWheel(parts,rotate);
}
//setTimeout
function animate_request(){
	rotate=(rotate+2*Math.PI/100)%(2*Math.PI);
	ctx.clearRect(0,0,can.width,can.height);
	drawText();
	drawWheel(parts,rotate);
	timeHandle=requestAnimationFrame(animate_request);
}
function timeContral(){
	secs+=1;
}

html代码：

<canvas id="mycan" width="500" height="500"></canvas>
		<div>
			<select id="btnGroup" name="btnGroup">
				<option value="9" disabled selected>9</option>
				<option value="8">8</option>
				<option value="7">7</option>
				<option value="6">6</option>
				<option value="5">5</option>
				<option value="4">4</option>
				<option value="3">3</option>
				<option value="2">2</option>
			</select>
			<input type="button" id="drawBtn" value="draw" />
			<input type="button" id="startBtn" value="start" />
			<input type="button" id="stopBtn" value="stop" />
		</div>

css代码：

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

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