最近项目中要实现可变进度条显示，首先想到这种可变化内容需要使用canvas来实现，折腾一番效果如下：

代码:

<template>
	<div class="container">
		<div class="score">
			<!-- uniapp写法 -->
			<!-- <canvas class="canvasb" canvas-id="canvasBgId"></canvas>
			<canvas class="canvasp" canvas-id="canvasId" ></canvas> -->
			<canvas class="canvasb" id="canvasBgId"></canvas>
			<canvas class="canvasp" id="canvasId" ></canvas>
			<div class="value">{{score}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return  {
				score: 80
			}
		},
		methods: {
			// 绘制进度条背景
			drawProgressBg() {
				let ctx = document.getElementById('canvasBgId').getContext('2d');
				// let ctx = uni.createCanvasContext('canvasBgId', this);// uniapp写法
				 // 设置圆环宽度
				// ctx.setLineWidth(this.borderWidth);// uniapp写法
				ctx.lineWidth = this.borderWidth;
				// 线条颜色			
				// ctx.setStrokeStyle(this.progressBgColor); 	// uniapp写法
				ctx.strokeStyle = this.progressBgColor;
				// 表示进度的两端为圆形
				// ctx.setLineCap('round');// uniapp写法
				ctx.lineCap = 'round';
				ctx.beginPath(); 
				let radius = this.progressWidth / 2;
				ctx.arc(radius, radius, radius - this.borderWidth, this.startAngle, this.endAngle, false);
				ctx.stroke(); // 对路径进行描绘
				// ctx.draw();// uniapp写法
			},
			
			// 绘制进度条
			drawCircleByProgress(progress) {
				// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
				let ctx = this.progressContext;
				if (!ctx) {
					ctx = document.getElementById('canvasId').getContext('2d');
					// uniapp写法
					// ctx = uni.createCanvasContext('canvasId', this);
					this.progressContext = ctx;
				}
				// 表示进度的两端为圆形
				// ctx.setLineCap('round');// uniapp写法
				ctx.lineCap = 'round';
				// 设置线条的宽度和颜色
				// ctx.setLineWidth(this.borderWidth);// uniapp写法
				ctx.lineWidth = this.borderWidth;
				// ctx.setStrokeStyle(this.progressColor);// uniapp写法
				ctx.strokeStyle = this.progressColor;
				// 0.9Math.PI开始画图，到2.1Math.PI结束，
				let endAngle = ((this.endAngle - this.startAngle) / 100) * progress + this.startAngle;
				ctx.beginPath();
				// 半径为整个canvas宽度的一半
				let radius = this.progressWidth / 2;
				ctx.arc(radius, radius, radius - this.borderWidth, this.startAngle, endAngle, false);
				ctx.stroke();
				// ctx.draw();		// uniapp写法		
			},
		},
		created() {
			this.borderWidth = 8;
			this.progressWidth = 200;
			this.progressColor = '#4486FF';
			this.progressBgColor = '#ddd';
			this.progressContext = null;
			this.startAngle = 0.95 * Math.PI;
			this.endAngle = 2.05 * Math.PI;
		},
		mounted() {	
			this.drawProgressBg();
			this.drawCircleByProgress(this.score);
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		
		.score {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 300px;
			height: 150px;
			.canvasb,.canvasp {
				position: absolute;
				top: 0;
				width: 300px;
				height: 150px;
			}
			
			.value {
				position: absolute;
				top: 40%;
				left: 28%;
				color: #4486FF;
				font-weight: bold;
				font-size: 32px;
			}
		}
	}
</style>