窗口大小调整时Canvas动画宽度无法更新的问题排查

嘿，我帮你找到了问题所在！你已经成功触发了resize函数，console也显示变量更新了，但动画的移动范围没跟着窗口尺寸变化，核心问题出在全局变量的同步上：

你在resize函数里定义了新的大写变量W和H，但动画逻辑（render函数）里判断边界用的是一开始定义的全局小写变量w和h——这就导致canvas尺寸虽然改了，但动画还是按照旧的窗口范围移动，看起来就像动画宽度没更新。

修复步骤： #

1. 同步全局变量：把resize函数里的大写W、H改成小写，直接覆盖原来的全局w和h，这样render函数里的边界判断就能拿到最新的窗口尺寸了。
2. 移除多余的手动绘制：因为requestAnimationFrame的动画循环一直在运行，不需要在resize里手动调用clear()、render()这些方法，避免状态冲突。

修正后的关键代码片段： #

// 保留开头的全局变量定义
var h = window.innerHeight;
var w = window.innerWidth;

// ... 其他代码不变 ...

// 修改后的resize函数
window.onresize = function() {
  // 直接更新全局的w和h
  w = window.innerWidth;
  h = window.innerHeight;
  canvas.width = w;
  canvas.height = h;
  x = w;
  console.log(x);
  // 这里不需要手动调用clear/render，动画循环会自动处理
}

额外优化建议： #

• 给rID声明全局作用域：在开头加上let rID;，避免它被限制在animate函数的局部作用域里，方便后续如果需要取消动画时使用cancelAnimationFrame(rID)。
• 清理无用变量：你定义的x变量在动画逻辑里没用到，可以考虑删掉，让代码更整洁。

这样修改后，窗口resize时，动画的移动边界就会跟着canvas的新尺寸自动调整啦！

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