Canvas画环形圆_canvas画圆环

作者：Cpp五条 | 2024-03-17 05:43:23

踩

canvas画圆环

效果图1：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas progress</title>
</head>
<body>
	<canvas id="process" width="200" height="200"></canvas>
	<script>
		(function (){
			var c = document.getElementById('process'),
				process = 0,
				ctx = c.getContext('2d');
 
			// 画灰色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 80, 0, Math.PI*2);
			// ctx.closePath();
			ctx.strokeStyle  = 'green';
			ctx.stroke();
 
			// 画红色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 70, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = 'red';
			ctx.fill();
 
			function animate(){
				requestAnimationFrame(function (){
					process = process + 1;
					drawCricle(ctx, process);
					if (process < 90) {
						animate();
					}
				});
			}
 
			function drawCricle(ctx, percent){
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(100, 100);  
				ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
				ctx.closePath();
				ctx.fillStyle = 'yellow';
				ctx.fill();
 
				// 画内填充圆
				ctx.beginPath();
				ctx.arc(100, 100, 60, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#fff';
				ctx.fill();
 
				// 填充文字
				ctx.font = "bold 20pt Microsoft YaHei"; 
				ctx.fillStyle = '#333';
				ctx.textAlign = 'center';  
				ctx.textBaseline = 'middle';  
				ctx.moveTo(100, 100);  
				ctx.fillText(process + '%', 100, 100);
			}
 
			animate();
		}());
	</script>
</body>
</html>

效果图2：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas progress</title>
</head>
<body>
	<canvas id="process" width="300" height="300"></canvas>
	<script>
		(function (){
			var c = document.getElementById('process'),
				process = 0,
				ctx = c.getContext('2d');
 
			function animate(){
				requestAnimationFrame(function (){
					process = process + 1;
					drawCricle(ctx, process);
					if (process < 75) {
						animate();
					}
				});
			}
 
			function drawCricle(ctx, percent){
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(100, 100);
				ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
				ctx.closePath();
				ctx.fillStyle = '#108EE9';
				ctx.fill();
 
				// 画第一层灰色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 70, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = '#ededed';
			ctx.fill();
			// 画第二层白色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 65, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = '#fcfcfc';
			ctx.fill();
 
				// 画内填充圆
				ctx.beginPath();
				ctx.arc(100, 100, 55, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#FAFCFC';
				ctx.fill();
 
			// 画灰色的框
			ctx.beginPath();
			ctx.arc(100, 100, 55, 0, Math.PI*2);
			// ctx.closePath();
			ctx.strokeStyle  = '#f2f2f2';
			ctx.stroke();
 
				// 填充文字
				ctx.font = "bold 20pt Microsoft YaHei";
				ctx.fillStyle = '#DA4816';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.moveTo(100, 100);
				ctx.fillText(process + '%', 100, 80);
 
				ctx.fillStyle = '#aaa';
				ctx.font="10px Georgia";
				ctx.fillText("销售目标完成度",100,100);
 
				// ctx.font="10px Georgia";
				ctx.fillText("集团内排名",100,120);
 
				ctx.fillStyle = '#DA4816';
				ctx.font="10px Georgia";
				ctx.fillText("1",100,140);
			}
 
			animate();
		}());
	</script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/254355