javascript - Javascript 事件处理程序图像对象

Question

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

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

Answer 1

在图像上设置 之前未绘制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

您可以onload在设置之前或之后定义函数image.src。这并不重要。但是大多数人喜欢在之前定义它。

Answer 2

如果您看到它的 img.onload，这意味着一旦图像加载到页面上，该功能就会起作用。所以首先设置源，然后绘制图像。