uni-app进度条

<template>
	<view>
		<canvas canvas-id="ring" id="ring"  style="width: 200px; height: 180px;">
		        <!-- <p>抱歉，您的浏览器不支持canvas</p> -->
		</canvas>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		},
		props: {
			score: {
				type: Number
			}
		},
		mounted(){
			console.log( this.score,' this.score')
			setTimeout(co=>{
				this.circleProgressbar('ring', 200, 180, this.score)
			},500)
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			circleProgressbar(canvasId, width, height, angle) {
				var context = uni.createCanvasContext(canvasId, this);
				
				// var context = wx.createCanvasContext(canvasId, this)
				// 外层圆环
				context.beginPath()
				context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, 2.2 * Math.PI)
				context.setLineWidth(16)
				context.setLineCap('round')
				context.setStrokeStyle('rgba(255,255,255,0.1)')
				context.stroke()
	
				// 外层进度圆环
				context.beginPath()
				context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, (1.4 * (angle / 100) + 0.8).toFixed(1) * Math.PI)
				context.setLineWidth(10)
				context.setLineCap('round')
				context.setStrokeStyle('#fff')
				context.stroke()
	
				// 指示器
				const xAxis = Math.cos(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				const yAxis = Math.sin(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				context.beginPath()
				context.arc(width / 2 + xAxis, height - 80 + yAxis, 10, 0, 2 * Math.PI)
				context.setFillStyle('#fff')
				context.fill()
				// 指示器内环
				const xInAxis = Math.cos(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				const yInAxis = Math.sin(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				context.beginPath()
				context.arc(width / 2 + xAxis, height - 80 + yAxis, 6, 0, 2 * Math.PI)
				context.setFillStyle('#2A8FFF')
				context.fill()
	
				// 文本
				const textY = Math.sin(Math.PI * 2 / 360 * (1.8 * (100 + 15))) * (width / 2 - 20)
				context.beginPath()
				context.setFillStyle('#fff')
				context.setFontSize(20)
				context.setTextAlign('center')
				context.setTextBaseline('middle')
				context.fillText('匹配度', width / 2, height - 20)
				context.font = `normal bold ${40}px sans-serif`;
				context.fillText(angle+"%", width / 2, height - 50 + textY)
	
				context.draw()
			},
		}
	}
	
</script>

效果如下：