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 закончена, этот код будет потерпеть неудачу.