小程序canvas彩虹图+动画

效果图

wxml

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)
      }
    }
  }
})