Javascript事件处理程序映像对象

我需要帮助理解以下javascript。在图像上设置源之前，如何在上下文上绘制图像？我正在读一本HTML5游戏开发书，这是这本书的样本书

var ctx = canvas.getContext && canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img,100,100);
}
img.src = 'images/sprites.png';

---

如果您看到它的img.onload，这意味着一旦图像加载到页面上，该函数就会工作。因此，首先设置源，然后绘制图像。

在图像上设置

src

之前，不会绘制图像。正在

img.onload

事件处理程序函数中绘制图像，该函数仅在图像加载后调用：

image.onload = function () {
    context.drawImage(image, 100, 100);
};

在简单的英语中，这读作“仅在加载图像后绘制图像”

这里发生了什么事

var context = canvas.getContext("2d");  // get the 2d context

var image = new Image;                  // create a new image object

image.onload = function () {            // once the image loads
    context.drawImage(image, 100, 100); // draw the image
};

image.src = "images/sprites.png";       // load the image

您可以在设置

image.src

之前或之后定义

onload

函数。这并不重要。然而，大多数人以前喜欢给它下定义