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关于这个话题。