Javascript - canvas - drawImage가 작동하지 않음

Question

다른 모든 유사한 게시물을 읽었지만 왜이 문제가 있는지 이해할 수 없습니다.

페이지에 캔버스 (#canvas)와 이미지 (hero.png)가 있고 본문 끝에 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; 

을 그리고이 작동하지 않습니다 : 다음 JS 코드에서 ...

는

이 작동

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

당신은 기능 이전에만이 구문을 정의 호출 할 수 있습니다 : 당신은 당신의 객체에 메소드를 정의

game.draw = function(){}; 

을을 writting하여

function draw() 
{ 
    //COde here 
} 

, 당신은 자바 스크립트 함수를 정의하지 : 그건 왜 정의하기 전에 전화 할 수 없는지 :)

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로드가 완료되면,이 코드는 것 실패.