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

1 个答案: