Javascript 中实例的 drawImage

Question

我不明白为什么 drawImage 方法在 Canvas2D 实例上不起作用。

但是当我把它放在 setTimeout 方法中时它起作用了，为什么？

function Canvas2D() {
  this._canvas = document.getElementById('screen');
  this._canvasContext = this._canvas.getContext('2d');
}

Canvas2D.prototype.clear = function() {
  this._canvasContext.clearRect(0, 0, this._canvas.width, this._canvas.height);
};

let Canvas = new Canvas2D();

let image = new Image();
image.src = './assets/sprites/spr_background.png';

// Doesn't work here
Canvas._canvasContext.drawImage(image, 33, 71);

setTimeout(() => {
  // When I put it here it works
  // Canvas._canvasContext.drawImage(image, 33, 71);
}, 1000);

Answer 1

必须加载图像才能正确绘制。如果您要执行以下操作：

image.onload = function(){
  Canvas._canvasContext.drawImage(image, 33, 71);
}

应该可以，我猜...

1 秒超时后，图像很可能已在这段时间内加载完毕。上面的代码等待图像被加载，然后绘制它。（所以如果它在不到一秒内加载它可以更早地绘制它，如果它需要超过一秒它就不会失败）

Javascript 中实例的 drawImage

drawImage on instance in Javascript

html

javascript

oop

drawimage

html5-canvas