HTML 5/Javascript canvas加載圖像錯誤

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

加載圖像是一個異步過程，因此您需要爲「加載」事件添加事件處理程序。

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

我在我的項目中定期處理這個問題，因爲我們大量使用canvas和sprite渲染。

更新：這裏的MDN's page關於這個話題。