uniapp使用canvas写环形进度条

遇到的坑

1. 使用普通canvas需要延迟设置draw() stroke()才生效。
2. 使用canvas2d在微信小程序的开发者工具上表现为固定在屏幕上，不随容器滚动，但是手机表现正常。
3. 记住： 在组件中获取实例需要使用in(this)。如 const ctx = uni.createCanvasContext('myCanvas',this) ，const query = uni.createSelectorQuery().in(this)
   

组件代码

<template>
  <div class="com-container">
    <canvas canvas-id="canvas" id="canvas" class="my-canvas" type="2d"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 50
    },
    innerText: {
      type: String,
      default: '850'
    }
  },
  data() {
    return {
      ctx: null // 画布实例
    }
  },
  mounted() {
    this.getCanvas()
  },
  methods: {
    /**
     * @method 获取画布
     */
    getCanvas() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#canvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node
          canvas.width = 120
          canvas.height = 120
          const ctx = canvas.getContext('2d')
          this.ctx = ctx
        })
      setTimeout(() => {
        this.drawTrack()
        this.drawProgress(this.progress)
        this.drawText(this.innerText)
      }, 500);
    },
    // 绘制轨道
    drawTrack() {
      this.ctx.save()
      this.ctx.beginPath()
      this.ctx.lineCap = "round"
      this.ctx.lineWidth = 8
      this.ctx.strokeStyle = "#dde1ed"
      // x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针
      this.ctx.arc(60, 60, 50, 0, 2 * Math.PI)
      this.ctx.stroke()
      this.ctx.closePath()
      this.ctx.restore()
    },
    // 绘制进度
    drawProgress(num) {
      this.ctx.save()
      this.ctx.beginPath()
      this.ctx.lineCap = "round"
      this.ctx.lineWidth = 8
      this.ctx.strokeStyle = "#5f94f0"
      // context.arc(x,y,r,sAngle,eAngle,counterclockwise);   //x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针
      this.ctx.arc(
        60,
        60,
        50,
        -Math.PI / 2,
        -Math.PI / 2 + ((2 * num) / 100) * Math.PI,
        true
      )
      this.ctx.stroke()
      this.ctx.closePath()
      this.ctx.restore()
    },
    // 绘制文字
    drawText(num) {
      this.ctx.save()
      this.ctx.fillStyle = "#6094F3"
      this.ctx.font = "33px Helvetica"
      this.ctx.textAlign = "center"
      this.ctx.fillText(num, 60, 70)
      this.ctx.restore()
    }
  }
}
</script>

<style lang='scss' scoped>
.com-container {
  width: 240rpx;
  height: 240rpx;

  .my-canvas {
    width: 100%;
    height: 100%;
    z-index: 999;
  }
}
</style>