小程序canvas彩虹圖+動畫

效果圖

wxml

<canvas canvas-id="arc" style="width:574rpx;height:287rpx;margin:auto;"></canvas>

js

Page({
  data: {
  },
  onReady(){
    this.drawArc({
      arcW: 574,//寬rpx
      arcH: 287,//高rpx
      borderWidth: 20,//線粗細rpx
      bgColor: [//漸變色，從外到裏
        { bgColorFrom: '#62BDFF', bgColorTo: '#3388FF' },
        { bgColorFrom: '#8BE39A', bgColorTo: '#2EC893' },
        { bgColorFrom: '#FFDE4F', bgColorTo: '#FEA12C' }
      ],
      progressArr: [50, 50, 100]//概率0-100
    });
  },
  // 繪製彩虹圖
  drawArc(data) {
    const that = this;
    // 線粗細
    const w = data.borderWidth / 750 * wx.getSystemInfoSync().windowWidth;
    // 偏移量
    const Offset = (data.borderWidth + 10) / 750 * wx.getSystemInfoSync().windowWidth;
    // 中心點
    const x = data.arcW / 750 * wx.getSystemInfoSync().windowWidth / 2;
    // 中心點
    const y = data.arcH / 750 * wx.getSystemInfoSync().windowWidth - w / 2;
    const context = wx.createCanvasContext('arc');
    const progressArr = data.progressArr;
    const bgColor = data.bgColor;
    for (let i = 0; i < progressArr.length; i++) {
      context.setLineWidth(w);
      context.setStrokeStyle('#f2f2f2');
      context.setLineCap('round');
      context.arc(x, y, x - w - Offset * i, -Math.PI, 0, false);
      context.stroke();
      context.draw(true);
    }
    for (let i = 0; i < progressArr.length; i++) {
      let step = 0;
      let progress = 0;
      // 設置漸變
      loop();
      function loop() {
        let gradient = context.createLinearGradient(0, 0, x, 0);
        gradient.addColorStop(0, bgColor[i].bgColorFrom);
        gradient.addColorStop(1, bgColor[i].bgColorTo);
        context.setStrokeStyle(gradient);
        context.arc(x, y, x - w - Offset * i, -Math.PI, step * Math.PI - Math.PI, false);
        context.stroke();
        context.draw(true);
        progress += 5;
        step = 0.01 * progress;
        setTimeout(() => {
          if (step <= 0.01 * progressArr[i]) {
            loop();
          }
        }, 20)
      }
    }
  }
})