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(); }; 

有想法的是，如果game.draw定義之前hero加載完成後，該代碼會失敗。