JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Canvas画圆形进度条

2021. 11. 25    

canvas画圆形进度条

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>进度条</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<canvas id="canvas" width="800" height="500"></canvas>
	</div>
</body>
<script>
	/*
		drawRing function 画进度条方法
			radius 进度条的半径
			width 进度条的总宽
			thick 进度条的粗度
			color 进度条的颜色
			angle 进度条的进度
	*/
	function drawRing({ radius, thick, color, angle }) {
		let canvas = document.getElementById("canvas");
		let cv = canvas.getContext('2d');
		let startX = canvas.clientWidth / 2;
		let startY = canvas.clientHeight / 2;
		//开启路径    
		cv.beginPath();
		//定义笔触开始的地方    
		cv.moveTo(startX, startY);
		// 圆心X，Y坐标 ，半径200 ，开始角度，结束角度  
		cv.arc(startX, startY, radius + 0.1, -90 * Math.PI / 180, (angle * 3.6 - 90) * Math.PI / 180)
		//指定填充颜色    
		cv.fillStyle = color;
		//图片填充    
		cv.fill();
		// 白色覆盖
		cv.beginPath();
		cv.moveTo(startX, startY);
		cv.arc(startX, startY, radius - thick + 0.4, -90 * Math.PI / 180, (360 - 90) * Math.PI / 180)
		cv.fillStyle = '#fff';
		cv.fill();
	}
	drawRing({ radius: 20, thick: 8, color: 'red', angle: 60 })
</script>

</html>
# Canvas