uniapp 实现渐变圆弧进度条，并且根据实际数值控制进度

在 uni-app 中实现渐变圆弧进度条，并且根据实际数值控制进度，可以利用 canvas 来绘制圆弧，并通过 canvas 的渐变功能实现渐变效果。

export default {
  onReady() {
    this.drawProgress(0.7); // 根据实际数值设置进度
  },
  methods: {
    drawProgress(progress) {
      const ctx = uni.createCanvasContext('progressCanvas', this);
      const width = 200;
      const height = 200;
      const radius = 80;
      const lineWidth = 20; // 进度条宽度
      const startAngle = Math.PI / 2;//正数向下闭合Math.PI / 2，负数向上闭合-Math.PI / 2
      const endAngle = startAngle + progress * 2 * Math.PI;
 
      // 渐变色
      const gradient = ctx.createLinearGradient(0, 0, width, height);
      gradient.addColorStop(0, '#ff0000');
      gradient.addColorStop(1, '#00ff00');
 
      // 绘制底部圆
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, 0, 2 * Math.PI);
      ctx.setStrokeStyle('#eaeaea');
      ctx.setLineWidth(lineWidth);
      ctx.stroke();
 
      // 绘制进度条
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, startAngle, endAngle, false);
      ctx.setStrokeStyle(gradient);
      ctx.setLineWidth(lineWidth);
      ctx.setLineCap('round');
      ctx.stroke();
 
      // 显示进度数值
      ctx.setFontSize(20);
      ctx.setFillStyle('#000000');
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.fillText((progress * 100).toFixed(0) + '%', width / 2, height / 2);
 
      ctx.draw();
    }
  }
}

渐变圆弧：使用 ctx.createLinearGradient 创建线性渐变，并通过 addColorStop 设置渐变的颜色节点。

动态更新进度：通过 updateProgress 方法动态更新进度值，并重新调用 drawProgress 方法重新绘制进度条。

角度计算：通过 (progress / 100) * 2 * Math.PI 计算当前进度对应的弧度，从 -Math.PI / 2 开始绘制圆弧。