uniapp做一个圆环进度条

<template>
	<view class="content">
		<view class="sj-title" @click="loadProgress">点击</view>
		<view>
			<canvas style="width: 200px; height: 200px;" canvas-id="progressCanvas"></canvas>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				progress: 0,
			};
		},
		mounted() {
			this.loadProgress();
		},

		methods: {
			loadProgress() {
				// 清空画布
				const ctx = uni.createCanvasContext('progressCanvas');
				ctx.clearRect(0, 0, 200, 200);
				ctx.lineWidth = 10;
				ctx.strokeStyle = '#ececec';
				ctx.beginPath();
				ctx.arc(100, 100, 80, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.strokeStyle = '#32b662';
				ctx.beginPath();
				// 绘制进度条
				ctx.arc(100, 100, 80, -Math.PI / 2, Math.PI * this.progress / 100 * 2 - Math.PI / 2);
				ctx.stroke();
				ctx.draw();
				// 更新进度
				this.progress = this.progress + 20 > 100 ? 0 : this.progress + 20;
			}
		},
	};
</script>
<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(to bottom, #D4D9E4 0%, #F8F8F8 40%);
	}

	.sj-title {
		font-size: 32rpx;
		color: #181818;
		margin: 40rpx 0;
	}
</style>