Javascript 如果加载图像，是否有方法使函数返回true或false？

我正在开发一个小游戏，使用canvas元素在上面绘制图像，并让它们充当实心瓷砖

为了使context.drawImage（）函数能够工作，需要首先将调用drawing时调用的image变量加载到内存中，否则它将尝试绘制未定义的图像

目前，我使用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

谢谢

如果drawImage（）函数仅在加载时调用，是否不总是加载，因此不需要检查？即

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

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

与

function drawimage () {
    "use strict";
    ctx.drawimage(image, x, y, width, height);
}

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

---

这里的问题是：

ctx.drawimage（图像，x，y，宽度，高度）

其中

i

在

drawimage

处应为大写

i

：

ctx.drawimage

，请参阅

另外，尝试移动

image.src=“/path/to/image/”

after

image.onload=function（）{}

事件声明

var imageload=false；
var image=新图像（）；
var c=document.getElementById（“游戏”）；
var ctx=c.getContext（“2d”）；
函数drawimage（）{
“严格使用”；
console.log（imageloaded）
如果（imageloaded==真）{
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像，0，0，c.宽度，c.高度）；
}
}
image.onload=函数（）{
“严格使用”；
imageloaded=true；
drawimage（）；
};
image.src=”http://lorempixel.com/50/50/nature";
谢谢大家的帮助！我考虑了Joseph Young关于使用中心函数或变量来说明加载了哪些图像的评论，并得出以下结论：

var imagesloaded = 0;

image.onload = function () {
    imagesloaded += 1;
}

function imagetestloaded () {
    if(imagesloaded === 1){
        return(true);
    } else {
        return(false);
    }
}

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

如果代码希望看到的所有图像都在那里，这将运行。
唯一的问题是，因为我是为一个游戏而这样做的，我需要在每一个刻度处重新绘制图像，而不是仅仅一次，如果示例在这方面不是很清楚，那么很抱歉！也许有某种对象/服务，当新图像到达时，它具有接受新图像的功能？同样，在
onload
中，调用
ticker.addImage（图像），我想这取决于您希望为imageImages提供什么样的额外信息，只需要它们的变量名和src，将它们添加到中心变量可能会起作用。那样的话，我只需要为每个图像重新加载。我会看看我能做些什么，然后发布我的结果。@JosephYoung在
drawimage
上看到小写的
I
你需要等待所有图像加载，然后调用drawimage函数一次，还是想在加载图像时逐个绘制图像？尝试放置
image.src=“images/image.png”
在
image.onload=function（）{}
之后，这里有一个函数，在调用
start
函数之前加载所有需要的图像，在该函数中所有图像都完全可用。@Iblob
.drawimage
应该是
.drawimage
谢谢！幸运的是，为了变量名的清晰性，我没有直接从代码中粘贴它。@lblob
.drawimage
应该是
.drawimage
大写
I