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，这意味着一旦图像被加载到页面上，该功能就会起作用。所以首先设置源，然后绘制图像。

Javascript事件处理程序图像对象

2 个答案: