在HTML5中使用drawImage

事实：以下代码有效。在HTML5中使用drawImage

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函数中最终会工作？

来源

2013-04-15 Tyrick

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

来源

2013-04-15 01:09:58 Joseph

我必须承认它这个答案真的节省了我甚至认为这个问题不是真的与我的问题有关，谢谢 –

我相信它是因为加载图像不即时，这需要时间。一旦图像加载，那么它可以被吸引到画布

来源

2013-04-15 01:10:07

只能绘制图像它的加载后，帆布，这就是为什么当你从在onload回调做它的工作原理。它可以和setInterval一起工作，因为在一段时间之后，它最终会被完全加载。

来源

2013-04-15 01:10:43 bfavaretto

这是必要的，因为浏览器需要“读”，最终下载图像（onload事件）正确处理图片的加载。使用的setInterval来模拟这种行为无法连接速度慢的工作，对于一个大的图像的示例性负载... 因此，要做到这一点，最好的办法是：

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

来源

2013-04-15 01:12:55

在HTML5中使用drawImage

回答

相关问题