时间戳

首页 > 解决方案 > Javascript中实例上的drawImage

javascript - 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);

标签： javascripthtmloophtml5-canvasdrawimage

解决方案

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

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

它应该工作，我猜...

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

推荐阅读