uniapp圆形进度条

UniApp提供了多种方式实现圆形进度条，下面介绍其中一种：

1. 在template中添加canvas元素，设置id和宽高：

<canvas id="progress" style="width: 100px; height: 100px;"></canvas>

2. 在script中获取canvas对象，并设置相关属性：

export default {
  onReady() {
    const canvas = uni.createSelectorQuery().select('#progress')
    const ctx = canvas.getContext('2d')
    const width = canvas.width
    const height = canvas.height
    const radius = width / 2 - 10 // 圆形的半径
    const lineWidth = 10 // 圆形的线宽
    const percent = 50 // 进度百分比（0-100）

    // 绘制底部圆形
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2, false)
    ctx.strokeStyle = '#eee'
    ctx.lineWidth = lineWidth
    ctx.stroke()

    // 绘制进度圆弧
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, radius, -Math.PI / 2, (Math.PI * 2) * percent / 100 - Math.PI / 2, false)
    ctx.strokeStyle = '#007aff'
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

3. 根据实际需求修改进度百分比即可。