Javascript中实例上的drawImage

我不明白为什么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);

---

必须加载图像才能正确绘制。 如果你想做以下事情：

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

我想这应该行得通

---

超时1秒后，图像可能已在该时间内加载。上面的代码等待加载图像，然后绘制它。因此，如果在不到一秒钟的时间内加载，它就可以更早地绘制，如果超过一秒钟，它就不会失败。

可能到那时图像已经加载了？原因是在您想要绘制图像的时候图像还没有完全加载。是的，它可以工作，但是为什么它也可以在setTimeout方法中工作？