JavaScript小车游戏Canvas无法绘制图片，控制台逐行执行正常

嘿，我一眼就看出问题所在啦——这是图片加载的异步特性搞的鬼！

你当前的代码里，刚设置完image.src就立刻调用drawImage()，但图片加载需要时间，这时候图片还没完全加载好，Canvas自然画不出东西。而你在控制台逐行输入的时候，手动操作的间隔给了图片足够的加载时间，所以就能正常显示了。

修复方案 #

我们只需要等图片加载完成后再执行绘制操作，通过监听图片的load事件就能实现。修改你的drawCar()函数如下：

function drawCar() {
 let image = new Image();
 // 先绑定加载完成事件
 image.onload = function() {
   // 图片加载完成后再绘制
   context.drawImage(image, 200, 200, carLength, carWidth);
 };
 // 最后设置图片地址
 image.src = 'assets/images/car_orange.png';
}

额外说明 #

• 一定要先绑定onload事件，再设置src属性，这能避免部分旧浏览器因为图片缓存，导致加载完成事件不触发的问题。
• 如果你的游戏里需要多次绘制这辆车，建议把Image实例缓存起来（比如放在全局变量里），不用每次调用drawCar()都重新创建新的Image对象，这样能提升性能。

内容的提问来源于stack exchange，提问作者Hedwin Bonnavaud