Canvas画环形圆

最新推荐文章于 2024-01-03 00:00:00 发布

hyupeng1006

最新推荐文章于 2024-01-03 00:00:00 发布

阅读量5k

点赞数 2

分类专栏： canvas

本文链接：https://blog.csdn.net/hyupeng1006/article/details/91872285

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图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>

hyupeng1006

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Canvas画环形圆

效果图1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas progress</title></head><body> <canvas id="process" width="...
复制链接

扫一扫

专栏目录