在HTML5中使用drawImage

Question

事实:以下代码有效.

var img = new Image();
img.onload = function() {
    context.drawImage(img, 32, 32);
};
img.src = "example.png";

第一次观察:以下内容不会画到画布上.

var img = new Image();
img.src = "example.png";
context.drawImage(img, 32, 32);

第二个观察:以下将绘制到画布(最终)...

var img = new Image();
img.src = "example.png";
setInterval(function() {context.drawImage(img, 32, 32);}, 1000);

---

为什么我需要在回调上调用drawImage函数？如果是这种情况,为什么它最终在嵌套在setInterval函数中时有效？

Answer 1

当您设置src图像对象时,浏览器开始下载它.但是,在浏览器执行下一行代码时,您可能会也可能不会加载该图像.这就是你绘制"空白"图像的原因,因为它尚未加载.

您需要放置一个onload处理程序以了解图像何时完成加载.只有这样你才能将它画到画布上:

var img = new Image();             //create image object
img.onload = function(){           //create our handler
  context.drawImage(img, 32, 32);  //when image finishes loading, draw it
}
img.src = "example.png";           //load 'em up!