javascript - 如果加载图像，有没有办法使函数返回 true 或 false？

Question

我正在开发一个小游戏，使用 Canvas 元素在其上绘制图像并使它们充当实体图 block 。

为了使 context.drawImage() 函数正常工作，调用绘图时调用的图像变量需要首先加载到内存中，否则它将尝试绘制未定义的图像。

目前我已经使用 image.onload 事件进行了设置，如下所示:

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");
image.src = "images/image.png";

function drawimage () {
    "use strict";
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawimage(image, x, y, width, height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

-编辑-这是一个新的片段，因为我正在为一个绘制的平台会移动的游戏执行此操作。

var drawtimer = setInterval(drawimage, 10);

这可行，但有点困惑，我需要为每个需要加载的图像提供一个新的全局变量，并需要一个 onload 函数来设置该变量。

我想知道的是，而不是这样做:

if (imageloaded === true) {
    ctx.drawimage(image, x, y, width, height);
}

我可以做一些类似的事情:

if (image.testloaded() === true) {
    ctx.drawimage(image, x, y, width, height);
}

如果图像已加载，则返返回告，而无需依赖 onload。

作为引用，我在这里使用纯 javascript，我愿意使用特殊的库，但理想的答案是使用纯 javascript。

谢谢!

Answer 1

问题在这里:ctx.drawimage(image, x, y, width, height); 其中 drawimage 处的 i 应该是大写I:ctx.drawImage，参见 CanvasRenderingContext2D.drawImage()

另外，尝试将 image.src = "/path/to/image/"; 移到 image.onload = function() {} 事件声明之后

var imageloaded = false;
var image = new Image();
var c = document.getElementById("game");
var ctx = c.getContext("2d");

function drawimage () {
    "use strict";
  console.log(imageloaded)
    if (imageloaded === true) {
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawImage(image, 0, 0, c.width, c.height);
    }
}

image.onload = function () {
    "use strict";
    imageloaded = true;
    drawimage();
};

image.src = "http://lorempixel.com/50/50/nature";

<canvas id="game" width="50px" height="50px"></canvas>