绘制圆环进度条的两种方式

绘制圆环进度条有多种方式,那么现在介绍两种基本的,也是最常见的.

第一种:canvas绘制圆环代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<meta content="email=no" name="format-detection">
	<title>圆环</title>
</head>
<body> 
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script>
	var canvas=document.getElementById("canvas");
	var process=30;
	var context=canvas.getContext("2d");
	
	//画外圆
	context.beginPath();
	context.arc(100,100,80,0,Math.PI*2);
	context.closePath();
	context.fillStyle="#666";
	context.fill();
	drawCircle(context,process);
	
	function drawCircle(ctx,process) {
		//进度环
		ctx.beginPath();
		ctx.moveTo(100,100);
		ctx.arc(100,100,80,Math.PI*1.5,Math.PI*(1.5+2*process/100));
		ctx.closePath();
		ctx.fillStyle="red";
		ctx.fill();
		
		//内圆
		ctx.beginPath();
		ctx.arc(100,100,75,0,Math.PI*2);
		ctx.closePath();
		ctx.fillStyle="white";
		ctx.fill();
		
		//填充文字
		ctx.font="bold 30px microsoft yahei";
		ctx.fillStyle="black";
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.moveTo(100,100);
		ctx.fillText(process+"%",100,100);
		
	}
	
</script>
</html>

第二种:js写的圆环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<meta content="email=no" name="format-detection">
	<title>圆环</title>
	<style>
		.circle{
			width: 200px;
			height: 200px;
			position: relative;
			border-radius:50%;
			background: red;
		}
		.clip_left,.clip_right{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left:0;
		}
		.circle_left,.circle_right{
			width: 200px;
			height: 200px;
			position: absolute;
			border-radius:50%;
			top:0;
			left: 0;
			background:green;
		}
		/*用于展示用的改变背景色*/
		.circle_left{
			background: green;
		}
		.circle_right{
			background: lightblue;
		}
		.circle_right,.clip_right{
			clip:rect(0,auto,auto,100px);
		}
		.circle_left,.clip_left{
			clip:rect(0,100px,auto,0);
		}
		/*当top和left取值为auto时,相当于0;当bottom和right取值为auto时,相当于100%*/
		.mask{
			width: 150px;
			height: 150px;
			border-radius:50%;
			left: 25px;
			top: 25px;
			background: #fff;
			position: absolute;
			text-align:center;
			line-height: 150px;
			font-size: 16px;
		}
	</style>
</head>
<body>
<!--背景圆-->
<div class="circle">
	
	<!--左半边圆-->
	<div class="circle_left">
		<div class="clip_left"></div>
	</div>
	
	<!--右半边圆-->
	<div class="circle_right">
		<div class="clip_right"></div>
	</div>
	<div class="mask">
		<span>70</span>%
	</div>
</div>
</body>
<script src="https://www.kqiu.cn/app-guide/ballSeason/jquery-3.2.1.min.js"></script>
<script>
	$(function () {
		if($(".mask span").text<=50){
			$(".circle_right").css("transform","rotate("+($(".mask span").text()*3.6)+"deg)");
		}else{
			$(".circle_right").css({
				"transform":"rotate(0deg)",
				"background":"red"
			});
			$(".circle_left").css("transform","rotate("+(($(".mask span").text()-50)*3.6)+"deg)");
		}
	})
</script>
</html>

绘制圆环进度条的两种方式

猜你喜欢