用Canvas画圆环百分比进度条

最新推荐文章于 2023-02-08 18:33:04 发布

遇见csm

最新推荐文章于 2023-02-08 18:33:04 发布

阅读量316

点赞数

分类专栏： canvas 文章标签： Canvas 圆环百分比进度条

本文链接：https://blog.csdn.net/csm17805987903/article/details/85006915

版权

canvas 专栏收录该内容

4 篇文章 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>

遇见csm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Canvas画圆环百分比进度条

效果图：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;canvas圆环进度&lt;/
复制链接

扫一扫

专栏目录