Javascript-canvas-drawImage不起作用

Question

我已經閱讀了所有其他類似的帖子，但是我不明白為什么會有這個問題。

我在頁面上有一個畫布（#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);
}

什么也沒出現。 控制台中沒有錯誤。 為什么？？？

謝謝！

Answer 1

您只能在使用以下語法定義函數之前調用函數：

function draw() 
{
  //COde here
}

通過寫

game.draw = function(){};

您為對象定義了一個方法，沒有定義JavaScript函數：這就是為什么在定義它之前不能調用它的原因:)

Answer 2

在第二段代碼中，您正在定義

game.hero.onload = game.draw;

當game.draw未定義時，因此您的onload是未定義的，並且在圖像加載完成時沒有任何反應。

Answer 3

在第二個示例中進行分配時，未設置game.draw ，這是將未定義的值復制到hero.onload 。

一種解決方法是將要調用的函數包裝在匿名函數中，然后從那里調用您的函數：

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

請記住，如果hero在game.draw的定義完成之前加載，則此代碼將失敗。