2

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-land.png」は単にキャンバスに表示されません。

4

2 に答える 2

1

画像は正常に読み込まれている可能性がありますが、私が知る限り、その時点でへの呼び出しが読み込まれたというgame.LevelOne.drawer.draw()保証はありません(画像は他のコードの実行をブロックすることなく非同期で読み込まれることに注意してください)。foreground-land.png

クラスonloadの画像オブジェクトの関数classLevelは空で匿名です。画像の読み込みが終了しても何も起こりません。他のすべてのことを考慮して、コードをどのように構築したいかはわかりませんが、game.LevelOne.drawer.draw()依存するリソースが完全にロードされている場合にのみ、 への呼び出しを成功させる必要があります。onloadこれを行う最善の方法は、そのオブジェクトに必要なすべてのリソースのコールバックにフックすることです (この場合、それは 1 つの画像だけです)。

于 2011-09-26T22:41:34.433 に答える
0

画像の読み込みは非同期操作です。(基本的に) 読み込みプロセスを無視し、同期操作であるかのように動作します。

確認できることの 1 つは、3 番目のパラメーターをコールバック ("LevelOne", "images/foreground-land.png", function() { this.drawer.draw() }) として使用し、それをオンロードとして実行することです。

于 2011-09-26T22:39:28.963 に答える