Question

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

//===================================
// 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-land.png”根本没有显示在画布上！

Answer 1

您的图片可能正常加载，但据我所知，您game.LevelOne.drawer.draw()的来电无法保证foreground-land.png此时已加载（请记住，图片异步加载而不阻止其他代码的执行。）

onload类中图像对象的classLevel函数为空且匿名。图像加载完成后没有任何反应。我不确定你是如何根据你所做的其他事情来构建代码的，但是如果它所依赖的资源已经完全加载，你应该只允许对game.LevelOne.drawer.draw()的调用成功。执行此操作的最佳方法是将onload回调挂钩到该对象所需的所有资源（在这种情况下，它只是一个图像）。

Answer 2

加载图像是一种异步操作，您（基本上）忽略了加载过程，并表现得好像是同步操作。

你可以看到的一件事是使用第三个参数作为回调（“LevelOne”，“images / foreground-land.png”，function（）{this.drawer.draw（）}）并将其作为的onload

drawImage（）不绘制预加载的图像对象。使用OO javascript

2 个答案: