在 HTML5 中使用 drawImage答案

【问题标题】：Using drawImage in HTML5在 HTML5 中使用 drawImage
【发布时间】：2013-04-15 01:07:25
【问题描述】：

事实：以下代码是有效的。

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

【问题讨论】：

标签： javascript html html5-canvas

【解决方案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!

【讨论】：

我必须承认这一点即使认为这个问题与我的问题没有真正的关系，这个答案也确实让我省心了，谢谢

【解决方案2】：

您只能在加载后将图像绘制到画布上，这就是当您从 onload 回调执行此操作时它可以工作的原因。它与 setInterval 一起工作，因为在一定时间后，它最终会完全加载。

【讨论】：

【解决方案3】：

我相信这是因为加载图像不是即时的，它需要时间。一旦图像加载完毕，就可以将其绘制到画布上

【讨论】：

【解决方案4】：

这是必需的，因为浏览器需要“读取”并最终下载图像（onload 事件）以正确处理图像加载。使用 setInterval 来模拟这种行为是行不通的，例如在慢速连接上加载大图像...... 所以最好的方法是：

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

【讨论】：