用Canvas画圆环百分比进度条

浅浅的花香味﹌ 2021-09-14 00:14 555阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>canvas圆环进度</title>
    	<link rel="stylesheet" href="">
    	<style>
     	*{padding: 0; margin: 0; }
     	.circle{width: 200px;height: 200px;margin: 20em auto;position: relative;}
     	canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;}
     	#canvas_1{z-index: 1 }
     	#canvas_2{z-index: 2; background: transparent;transform:rotate(-90deg); }
    	</style>
    </head>
    <body>
    	<div class="circle">
    		<canvas id="canvas_1" width="200" height="200"></canvas>
    		<canvas id="canvas_2" width="200" height="200"></canvas>
    	</div>
    	<script>
    	function inte(percent) {
    		var canvas_1 = document.querySelector('#canvas_1');
    		var canvas_2 = document.querySelector('#canvas_2');
    		var ctx_1 = canvas_1.getContext('2d');
    		var ctx_2 = canvas_2.getContext('2d');
    		ctx_1.lineWidth = 10;
    		ctx_1.strokeStyle = "#ccc";
    		//画底部的灰色圆环
    		ctx_1.beginPath();
    		ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
    		ctx_1.closePath();
    		ctx_1.stroke();
    		if (percent < 0 || percent > 100) {
    			throw new Error('percent must be between 0 and 100');
    			return
    		}
    		ctx_2.lineWidth = 10;
    		ctx_2.strokeStyle = "#f90";
    		var angle = 0;
    		var timer;
    		(function draw() {
    			timer = requestAnimationFrame(draw);
    			ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
    			//百分比圆环
    			ctx_2.beginPath();
    			ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
    			angle++;
    			var percentAge = parseInt((angle / 360) * 100)
    			if (angle > (percent / 100 * 360)) {
    				percentAge = percent
    				window.cancelAnimationFrame(timer);
    			};
    			ctx_2.stroke();
    			ctx_2.closePath();
    			ctx_2.save();
    			ctx_2.beginPath();
    			ctx_2.rotate(90 * Math.PI / 180)
    			ctx_2.font = '30px Arial';
    			ctx_2.fillStyle = 'red';
    			var text = percentAge + '%';
    			ctx_2.fillText(text, 80, -90);
    			ctx_2.closePath();
    			ctx_2.restore();
    		})()
    	}
    	window.onload = inte(60);
    	</script>
    </body>
    </html>

效果图：试试吧~~

![Center][]

[Center]: /images/20210813/fde92240d06b4e4683cfcee62bed00e5.png