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