在HTML5中使用drawImage

时间:2013-04-15 01:07:25

标签: javascript html5 html5-canvas

事实:以下代码有效。

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函数中时起作用?

4 个答案:

答案 0 :(得分:5)

当您设置图像对象的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!

答案 1 :(得分:1)

您只能在加载后将图像绘制到画布,这就是当您从onload回调中执行此操作时它的工作原理。它适用于setInterval,因为在一段时间后,它最终会被完全加载。

答案 2 :(得分:0)

我相信它是因为加载图像不是即时的,需要时间。加载图像后,可以将其绘制到画布

答案 3 :(得分:0)

这是必需的,因为浏览器需要阅读"并最终下载图像(onload事件)以正确处理图像加载。使用setInterval来模拟此行为无法正常工作,例如在慢速连接上加载大图像... 所以最好的方法是:

var img = new Image():
img.src = "image.jpeg";
img.onload = function() {
    // Now you can play with your image.
}