Taro+React+canvas画进度圆

HTML部分

<Canvas style={`width: ${(radius * 2)}px;height: ${radius * 2}px`} id='progress' canvasId='progress' />

JS部分

    const ctx = Taro.createCanvasContext('progress')
    ctx.canvas.height = radius * 2 + LineWidth * 2
    ctx.canvas.width = radius * 2 + LineWidth * 2
    // 画圆
    ctx.beginPath()
    ctx.arc(radius + LineWidth, radius + LineWidth, radius, -0.5 * Math.PI, 1.5 * Math.PI)
    ctx.setStrokeStyle('#E2E3E5')
    ctx.setLineWidth(LineWidth)
    ctx.stroke()
    // 画当前进度弧
    if (num > 0 && num <= 100) {
      const arc = 0.02 * num - 0.5
      ctx.beginPath()
      ctx.arc(radius + LineWidth, radius + LineWidth, radius, -0.5 * Math.PI, arc * Math.PI)
      ctx.setStrokeStyle('#C85000')
      ctx.setLineWidth(LineWidth)
      ctx.stroke()
    }

效果