Canvas无法绘制SpriteSheet精灵图问题求助

核心问题 #

图片加载是异步操作——当你设置sprite.src后立刻调用ctx.drawImage时，图片还没完成加载，此时Canvas无法绘制一个尚未加载的资源。

修复代码 #

把绘制逻辑放到图片的onload回调里，确保图片加载完成后再执行绘制：

const gamecanvas = document.getElementById("gamecanvas");
const ctx = gamecanvas.getContext("2d");

// 绘制绿色方块正常工作
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = "seagreen";
ctx.fillRect(50, 0, 50, 50);

// 修复后的精灵图绘制逻辑
const sprite = new Image();
sprite.onload = function() {
    // 图片加载完成后再绘制
    ctx.drawImage(sprite, 0, 0, 50, 50, 0, 150, 50, 50);
};
sprite.src = 'spritesheet.png'; // 最后设置src，避免旧浏览器的加载顺序问题

补充说明 #

之前用document.body.appendChild(spritesheet.png)能显示，是因为DOM元素会自动等待图片加载完成后再渲染到页面，但Canvas的drawImage API不会做这个等待，必须通过onload事件手动监听加载完成状态。

内容的提问来源于stack exchange，提问作者Janine the Wizard