Javascript 在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);

第二个观察：以下内容将被绘制到画布上（最终）

---

---

为什么我需要在回调中调用drawImage函数？如果是这样，为什么嵌套在setInterval函数中时它最终会工作？

当您设置图像对象的

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!

---

当您设置图像对象的

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!

---

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

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

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

只有在加载图像后才能将其绘制到画布上，这就是为什么从onload回调中执行此操作时它会工作的原因。它与setInterval一起工作，因为经过一定时间后，它最终会完全加载。

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

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

---

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

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

---

我必须承认，这个答案真的救了我，甚至认为这个问题与我的问题无关谢谢，我必须承认，这个答案真的救了我，甚至认为这个问题与我的问题无关谢谢