为何Canvas无法绘制图像？无报错但图像不显示

你遇到的问题核心是图片还没加载完成就调用了drawImage——图片加载是异步操作，当你执行绘制代码时，ground.png可能还没完成下载和解码，所以Canvas上没有任何内容，而且因为没有语法错误，控制台也不会抛出异常。

问题拆解 #

你控制台输出<img src="ground.png">是正常的，这说明你成功创建了Image对象，但这个对象此时还处于加载状态，并没有可用的图像数据。另外你的Loader函数写法忽略了异步加载的特性，直接返回未加载完成的Image对象，导致后续绘制操作无效。

修复步骤 #

我们需要调整代码，等待图片加载完成后再执行绘制，同时优化代码结构：

1. 重构Loader函数，支持加载完成回调

修改Loader，让它在图片加载完成后通知我们，而不是直接返回未就绪的Image对象：

var Loader = function(src, callback) {
  const image = new Image();
  // 图片加载完成后执行回调，把加载好的Image对象传出去
  image.onload = () => callback(image);
  // 可选：处理加载失败的情况
  image.onerror = () => console.error(`无法加载图片: ${src}`);
  image.src = src;
}

2. 调整绘制逻辑，等待加载完成再执行

将创建Sprite和绘制的代码放到Loader的回调里，确保只有图片就绪后才执行绘制：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var StyleSheet = function(image, width, height) {
  this.image = image;
  this.width = width;
  this.height = height;
  // 优化draw方法，无需重复传入image，直接使用实例的this.image
  this.draw = function(sx, sy, swidth, sheight, x, y, width, height) {
    context.drawImage(this.image, sx, sy, swidth, sheight, x, y, width, height);
  }
}

// 调用Loader，传入加载完成后的处理逻辑
new Loader("ground.png", function(background) {
  console.log("图片加载完成:", background);
  var sprite = new StyleSheet(background, 50, 50);
  sprite.draw(0, 0, 16, 16, 0, 0, 50, 50);
});

3. 额外检查项

• 确认图片路径：检查ground.png是否和你的HTML/JS文件在同一目录下。可以通过浏览器开发者工具的「网络」标签查看图片请求状态，如果是404，说明路径错误。
• 避免用CSS拉伸Canvas：你的Canvas已经通过属性设置了width="480" height="240"，这是正确的，不要用CSS再设置宽高，否则会导致图像拉伸变形。

原代码失效的原因 #

当你执行var background = new Loader("ground.png")时，浏览器才开始发起图片请求，此时background的complete属性为false，没有可用的像素数据。紧接着调用sprite.draw()，drawImage拿到的是未加载完成的图片，自然无法在Canvas上绘制内容。通过onload回调，我们确保只有当图片完全就绪后才执行绘制，这样就能正常显示图像了。

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