HTML Canvas矩形在setInterval动画中无法扩大的问题排查

嘿，我来帮你排查这个问题！你说得对，哪怕不用clearRect()，只要每次绘制的正方形尺寸越来越大，视觉上应该能看到它“变大”（毕竟新的大正方形会覆盖旧的小的）。但实际没变化，最常见的原因是控制尺寸的变量没有被正确累积更新，大概率是作用域的问题。

最可能的错误场景：变量作用域错误 #

很多人会犯这个错：把控制正方形大小的变量定义在绘制函数内部，导致每次调用函数时，变量都会被重新初始化，根本没法增长。比如这种错误代码：

function draw() {
  // 每次调用draw，squareSize都会被重置为50！
  let squareSize = 50;
  ctx.fillStyle = 'red';
  ctx.fillRect(100, 100, squareSize, squareSize);
  squareSize += 5;
}
setInterval(draw, 100);

你看，每次执行draw()，squareSize都会回到50，画出来的正方形自然永远一样大。

正确的实现方式 #

把控制尺寸的变量放到函数外部（全局或者闭包内），让它能保留每次修改后的值。这里给你一个完整的可运行示例：

// 确保DOM加载完成后再执行代码，避免获取不到canvas
document.addEventListener('DOMContentLoaded', () => {
  // 获取canvas元素和绘图上下文
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 把尺寸变量放在全局（或者这个闭包内），确保每次调用draw都能复用
  let squareSize = 50;
  // 正方形的起始坐标
  const startX = 100;
  const startY = 100;

  function draw() {
    // 绘制当前尺寸的红色正方形
    ctx.fillStyle = 'red';
    ctx.fillRect(startX, startY, squareSize, squareSize);

    // 每次绘制后，让尺寸增加（这里每次加5，你可以调整速度）
    squareSize += 5;

    // 可选：添加边界限制，防止正方形无限变大超出画布
    if (squareSize > canvas.width) {
      squareSize = 50; // 超出后重置尺寸，循环变大
    }
  }

  // 启动定时绘制，每隔100ms执行一次draw
  setInterval(draw, 100);
});

额外需要检查的点 #

• Canvas元素是否正确获取：确保你的canvas有对应的id，并且代码在DOM加载完成后执行（比如放在DOMContentLoaded事件里，或者把script标签放在body末尾）。
• setInterval是否正确启动：检查函数名有没有拼写错误，或者有没有被其他代码意外终止。

这样修改后，你就能看到正方形每次绘制都会变大啦——因为每次的尺寸变量都是在上一次的基础上增长的，新的大正方形会覆盖旧的，视觉上就是逐步扩大的效果。

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