drawImage（）未绘制预加载的图像对象。使用oojavascript

我正在使用JavaScript+Canvas编写一个简单的2D侧滚游戏。我在学习OOJavaScript的同时也在尝试这样做。我遇到了一个问题，我的图像将无法绘制到画布上，尽管加载正确。代码如下：

//===================================
// class - Canvas
//===================================

var classCanvas = function(id){
    canvas  = document.getElementById(id);
    context = canvas.getContext("2d"); 
}

//===================================
// abstract class - Image Drawer
//===================================

var classImageDrawer = function(that){
this.draw = function(){
    context.drawImage(that.img,
                      that.spriteCoordsX,
                      that.spriteCoordsY,
                      that.width,
                      that.height,
                      that.posX,
                      that.posY,
                      that.width,
                      that.height);
    }
}

//===================================
// class - Level
//===================================

var classLevel = function(name, src){
   this.name           = name;
   this.img            = new Image();
   this.img.src        = src;
   this.img.onload     = function(){ };
   this.spriteCoordsX  = 0;
   this.spriteCoordsY  = 0;
   this.posY           = 0;
   this.posX           = 0;
   this.height         = 400;
   this.width          = 600;
   this.drawer         = new classImageDrawer(this);
}

//==================================
//  Begin 
//==================================

var game      = new classCanvas("playground");
game.LevelOne = new classLevel("LevelOne", "images/foreground-land.png");

game.LevelOne.drawer.draw(); 

---

我已经检查了代码，我知道图像加载正确。运行时没有错误发生，图像“foreground.png”根本不会显示在画布上

加载图像是一个异步操作，您（基本上）忽略了加载过程，并将其视为同步操作

---

您可以看到的一件事是使用第三个参数作为回调（“LevelOne”，“images/foreground.png”，function（）{this.drawer.draw（）}），并在onload时这样做，您的图像可能加载得很好，但据我所知，您可以调用

game.LevelOne.drawer.draw（）

不能保证

前台land.png

在该点加载（请记住，图像是异步加载的，不会阻止其他代码的执行）

---

classLevel

类中图像对象的

onload

函数为空且匿名。图像加载完成后，不会发生任何事情。考虑到正在进行的所有其他操作，我不确定您希望如何构造代码，但如果所依赖的资源已完全加载，则您应该只允许调用

game.LevelOne.drawer.draw（）

。最好的方法是挂接到

onload

回调，以获取该对象所需的所有资源（在本例中，它只是一个图像）。

还有一些我不太明白的地方。根据你的建议，我想我可以用setTimeout来测试你理论的有效性。我做了以下操作：

setTimeout（game.LevelOne.drawer.draw（），5000）我本以为这会奏效。但是由于setTimeout在技术上不是睡眠状态，可能它在加载图像之前仍然调用draw（）。@user965927没问题！使用具有足够大延迟的
setTimeout（）
应该允许您暂时测试一些东西，但要知道这是一个临时修复。无法知道用户将花多长时间下载图像。在这里的代码片段中，
game.LevelOne.drawer.draw（）
实际上会立即被调用，然后返回值会传递给
setTimeout（）
。您需要将函数调用放在引号中：
setTimeout（“game.LevelOne.drawer.draw（）”，5000）