0

他の同様の投稿をすべて読みましたが、なぜこの問題が発生するのかわかりません。

ページにキャンバス (#canvas) と画像 (hero.png) があり、本体の最後に JS ファイルが読み込まれています。JSコードで...

これは機能します：

var game = {};
game.canvas = document.getElementById('canvas');
game.ctx = game.canvas.getContext("2d");
game.draw = function(){
  game.ctx.drawImage(game.hero, 200, 200);
}
game.hero = new Image();
game.hero.src = "hero.png";
game.hero.onload = game.draw;

そして、これは機能しません:

var game = {};
game.canvas = document.getElementById('canvas');
game.ctx = game.canvas.getContext("2d");
game.hero = new Image();
game.hero.src = "hero.png";
game.hero.onload = game.draw;
game.draw = function(){
  game.ctx.drawImage(game.hero, 200, 200);
}

何も表示されません。コンソールにエラーはありません。どうして？？？

ありがとう！

4

3 に答える 3

3

関数を定義する前に呼び出すには、次の構文のみを使用します。

function draw() 
{
  //COde here
}

書くことで

game.draw = function(){};

オブジェクトにメソッドを定義しますが、JavaScript 関数は定義しません: そのため、定義する前に呼び出すことはできません :)

于 2013-06-25T19:06:32.130 に答える
1

コードの 2 番目の塊では、定義しています

game.hero.onload = game.draw;

game.draw が未定義の場合、onload は未定義で、画像の読み込みが完了しても何も起こりません。

于 2013-06-25T19:07:20.780 に答える
1

game.draw2番目の例で割り当てるときに設定されていないため、未定義の値をにコピーしていますhero.onload。

回避策の 1 つは、呼び出したい関数を無名関数でラップし、そこから自分の関数を呼び出すことです。

game.hero.onload = function(){ game.draw(); };

heroの定義が完了する前にロードするgame.drawと、このコードは失敗することに注意してください。

于 2013-06-25T19:08:10.813 に答える