canvas类对象,图像不刷新

时间:2019-05-08 15:44:50

标签: javascript canvas html5-canvas

为什么JS draw()方法没有在每个间隔调用该URL来切换到新的随机图像?

    document.addEventListener("DOMContentLoaded", ready);

    class Canvas {
    constructor(height, width, hex, interval) {
      this.timer = 0;
      this.interval = interval ? interval : '1000';
      this.color = hex ? hex : '000000';
      this.canvas = document.getElementById('mainCanvas');
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.context = this.canvas.getContext('2d');
      this.image = new Image();

      var t = this;
      setInterval(function () {
        t.timer++;
        console.log(t);
        t.draw();
      }, this.interval);
    }

    init() {
      this.draw();
    }

    draw() {
      console.log(`${window.innerWidth}x${window.innerHeight}`);
      this.image.src = `https://picsum.photos/${window.innerWidth}/${window.innerHeight}`;
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.context.drawImage(this.image, 0, 0);
    }
  }

  function ready() {
    const canvas = new Canvas(null, null, 'ffcc00', 1000);
    canvas.init();
  }

调用draw()时,图像src没有刷新,是否假定它是同一图像?

0 个答案:

没有答案