小程序环形进度条（canvas）

父组件调用：
  this.$invoke(
    'roundProgress',
    'drowProgress',
    'runCanvas',
    60,
    60,
    90,
    10
  )

<template>
  <view class="progress">
    <view class="big-circle"></view>
    <view class="small-circle"></view>
    <canvas width="60" height="60" canvas-id="runCanvas" id="runCanvas" class="canvas"></canvas>
    <view class="info">
      <view class="count">{{count}}</view>
      <view class="text">库存</view>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
export default class roundProgress extends wepy.component {
  data = {
    percentage: '',
    animTime: '',
    timer: null
  }

  props = {
    count: {
      type: Number
    }
  }
  methods = {
    drowProgress(id, w, h, c, text) {
      this.draw(id, w, h, c, text)
    }
  }

  computed = {}
  onLoad() {}
  draw(id, w, h, c, text) {
    console.log('id, w, h, c, text',id, w, h, c, text);
    // 画灰色背景
    const ctx = wx.createCanvasContext(id)
    const num = ((2 * Math.PI) / 100) * c - 0.5 * Math.PI
    const roundWidth = '3'
    const circleWidth = w / 2 - Number(roundWidth) * 0.5
    // 画进度条
    let rad = (num - -0.5 * Math.PI) / 100
    let start = -0.5 * Math.PI
    let count = 1
    let end = start + rad * count
    this.timer = setInterval(() => {
      if (end >= num) {
        clearInterval(this.timer)
      }
      count = count + 1
      start = -0.5 * Math.PI
      end = start + rad * count
      ctx.arc(w / 2, h / 2, circleWidth, start, end)
      ctx.setLineWidth(roundWidth)
      ctx.strokeStyle = '#FFA200'
      ctx.stroke()
      ctx.beginPath()
      ctx.draw()
    }, 10)
  }
}
</script>

<style lang="less" scoped>
.progress {
  position: relative;
  height: 70px;
  .big-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 50%;
    background: #eee;
    z-index: 1;
  }
  .small-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 54px;
    height: 54px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
  }
  .canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    margin: auto;
    z-index: 3;
    // border-radius: 50%;
    // overflow: hidden;
  }
  .info {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%,-50%);
    text-align: center;
    .count {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      padding-bottom: 7rpx;
    }
    .text {
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
    }
  }
}
</style>