2

我正在使用 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”根本不会出现在画布上！

4

2 回答 2

1

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

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

于 2011-09-26T22:41:34.433 回答
0

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

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

于 2011-09-26T22:39:28.963 回答