<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>效果如下：
