drawImage()函数失效：Chrome中Canvas仅显示背景无法渲染图片

嘿，我来帮你排查Mario图片不显示的问题，看了你的代码，发现几个关键的地方需要调整：

1. drawImage参数错误（最直接的原因） #

你调用drawImage时最后两个参数设成了0, 0，这代表要绘制的图片宽度和高度都是0，这样当然看不到任何内容啦！drawImage的参数格式如果是drawImage(img, x, y, width, height)的话，最后两个参数是图片绘制后的宽高，必须设置成大于0的数值，比如Mario图片的实际宽高，或者你想要的尺寸：

// 假设Mario图片宽32，高32，你可以改成这样
ctx.drawImage(document.getElementById('Mario'), 50, 61, 32, 32);

如果想要保持图片原尺寸，也可以用drawImage(img, x, y)的简化写法，不用传宽高：

ctx.drawImage(document.getElementById('Mario'), 50, 61);

2. 确保图片加载完成后再绘制 #

如果你的Mario图片还没加载完成就调用drawImage，浏览器是没办法绘制的。你需要监听图片的load事件，等图片加载好再启动绘制循环：

const marioImg = document.getElementById('Mario');
const ctx = document.querySelector('Canvas').getContext('2d');

function draw() {
  ctx.drawImage(marioImg, 50, 61); // 这里用正确的参数
  window.requestAnimationFrame(draw);
  console.log('hi');
}

// 等图片加载完成再开始绘制
if (marioImg.complete) {
  draw();
} else {
  marioImg.addEventListener('load', draw);
}

3. 修复Canvas的尺寸设置问题 #

你现在只通过CSS设置了Canvas的显示尺寸，但Canvas的绘图缓冲区尺寸（也就是元素的width和height属性）还是默认的300x150，这会导致图片被拉伸变形，甚至可能出现在可视区域外。你需要同时设置Canvas的属性尺寸和CSS尺寸：

<!-- 在HTML里设置Canvas的属性尺寸，比如和窗口大小一致 -->
<canvas id='Canvas' width="1920" height="1080"></canvas>

或者用JS动态设置成窗口大小：

const canvas = document.getElementById('Canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

然后CSS保持你的设置，建议加上display:block消除默认间距：

#Canvas {
  width: 100%;
  height: 100%;
  background: url(Pictures/Background.jpg);
  margin: -8px;
  display: block;
}

4. 确认HTML中存在Mario图片元素 #

你代码里用了document.getElementById('Mario')，所以必须确保HTML里有对应的图片标签，并且src路径正确：

<!-- 把这个标签加到HTML里，src替换成你Mario图片的实际路径 -->
<img id="Mario" src="Pictures/Mario.png" style="display:none;" />

加上style="display:none;"可以让图片不在页面上显示，只作为Canvas绘图的素材。

按照上面的步骤调整后，Mario应该就能正常显示在Canvas上啦！

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