HTML Canvas中fillRect不显示问题排查：跟随教程遇JS报错

看起来你遇到的两个报错是核心问题，先把它们搞定，矩形显示的问题大概率也会跟着解决：

1. 先修复keys.js的语法错误 #

第一个报错 keys.js:15 Uncaught SyntaxError: missing ) after argument list 是语法级错误，它会直接导致整个keys.js文件无法被浏览器正确解析，后续依赖它的代码自然也会出问题。你需要打开keys.js定位到第15行，检查这些细节：

• 是不是函数调用的参数列表没闭合？比如写了document.addEventListener('keydown', (e) => { ... 但结尾忘了加)
• 有没有漏写引号？比如字符串没闭合
• 有没有逗号、括号的使用错误？

举个常见的正确keys.js写法参考（用来维护按键状态）：

const key = {
  w: false,
  a: false,
  s: false,
  d: false
};

document.addEventListener('keydown', (e) => {
  switch(e.key.toLowerCase()) {
    case 'w': key.w = true; break;
    case 'a': key.a = true; break;
    case 's': key.s = true; break;
    case 'd': key.d = true; break;
  }
});

document.addEventListener('keyup', (e) => {
  switch(e.key.toLowerCase()) {
    case 'w': key.w = false; break;
    case 'a': key.a = false; break;
    case 's': key.s = false; break;
    case 'd': key.d = false; break;
  }
});

2. 确保main.js能访问到key变量 #

修复完keys.js的语法错误后，要保证main.js能拿到key变量：

• 如果是在HTML里引入脚本，一定要先引入keys.js，再引入main.js，这样全局定义的key才能被main.js读取到
• 如果用了ES模块化，记得在keys.js里写export const key，然后在main.js里用import { key } from './keys.js'导入

3. 检查main.js的绘图逻辑 #

当上面两个问题解决后，再确认你的绘图代码是否完整：

var canvas = document.getElementById("screen");
// 必须获取2D上下文才能绘图，这步很容易忘！
var ctx = canvas.getContext('2d');

// 定义矩形的属性
var rect = {
  x: 50,
  y: 50,
  width: 50,
  height: 50,
  speed: 5
};

function update() {
  // 这里用到key变量，之前报错就是因为它没被正确加载
  if(key.w) rect.y -= rect.speed;
  if(key.a) rect.x -= rect.speed;
  if(key.s) rect.y += rect.speed;
  if(key.d) rect.x += rect.speed;
}

function draw() {
  // 先清空画布，避免移动时留下拖影
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 设置填充色为红色
  ctx.fillStyle = 'red';
  // 绘制矩形
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

function main() {
  update();
  draw(); // 一定要调用draw，不然矩形不会被渲染
  requestAnimationFrame(main);
}

// 启动动画循环
main();

重点确认：

• 有没有获取canvas的2D上下文（getContext('2d')）？没这步根本没法绘图
• 动画循环main()里是不是同时调用了update()和draw()？只更新位置不绘制的话，矩形不会显示
• 有没有设置fillStyle？哪怕不设置默认是黑色，也会显示，要是连这个都没写，可能会有问题

总结 #

先优先搞定keys.js的语法错误——这是所有问题的根源，语法错误会让keys.js完全失效，导致main.js找不到key变量，动画循环直接中断，fillRect根本没机会执行。等语法错误修复，key变量能正常访问后，再检查绘图逻辑的完整性，应该就能看到红色矩形了。

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