javascript - HTML 5/Javascript 画布加载图像错误

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);

因为我们大量使用画布和精灵渲染，所以我在我的项目中定期处理这个问题。

更新：这是MDN关于这个主题的页面。