HTML 5/자바 스크립트 캔버스 이미지로드 오류

Question

이미지를 함수 내에로드하려고하는데 이미지가 화면에 표시되지 않습니다. 콘솔 오류가 없으므로 작동하지 않는 이유를 모르겠습니다. 코드 : 함수가 호출 될 때

var canvas = document.getElementById('canvas'); 
ctx = canvas.getContext('2d'); 

var score = 0; 
var menuImg = new Image(); 
menuImg.src = "images/Startscreen.png"; 

gamemenu(); 

//The menu screen 
function gamemenu(){ 
    ctx.drawImage(menuImg,0,0); 
} 

이미지가 그려해야하지만,하지 어떤 도움을합니까?

Answer 1

이미지로드는 비동기 프로세스이므로 "load"이벤트에 대한 이벤트 처리기를 추가해야합니다.

menuImg = new Image(); 
menuImg.addEventListener("load", function() { 
    gamemenu(); 
}, false); 

우리는 캔버스와 스프라이트 렌더링을 많이 사용하기 때문에 정기적으로이 프로젝트를 처리합니다.

업데이트 :이 항목은 MDN's page입니다.