HTML Canvas绘制方块异常：仅能显示单个填充方块问题排查

嘿，我来帮你揪出这个问题的根源！虽然你只贴了部分代码，但根据你描述的现象——空心方块能正常显示多个，填充方块却每次只显示一个，而且你说二者逻辑一致，那大概率是填充方块的数组操作或者绘制状态有隐形的差异，我给你列几个最可能的排查方向：

1. 数组操作是不是不小心覆盖了？ #

这是最常见的坑！你说逻辑一致，但很可能在添加填充方块时，不是往数组里push新元素，而是直接把数组重置成了只有一个新方块。比如：

• 错误写法（每次覆盖数组，只能保留最后一个）：

// 填充方块数组操作
filledBlocks = [new FilledBlock(x, y, size)];

• 正确写法（往数组里追加元素，保留所有方块）：

filledBlocks.push(new FilledBlock(x, y, size));

你去对比下空心方块和填充方块的数组添加逻辑，肯定能发现差异！

2. 动画循环的绘制逻辑有没有疏漏？ #

检查你的动画循环顺序，是不是先清屏，再遍历两个数组绘制所有方块？比如正确的流程应该是：

function animate() {
  // 1. 先清屏，避免上一帧的内容残留
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 2. 遍历绘制所有空心方块
  hollowBlocks.forEach(block => block.draw());
  
  // 3. 遍历绘制所有填充方块
  filledBlocks.forEach(block => block.draw());
  
  requestAnimationFrame(animate);
}

如果填充方块的绘制逻辑里，不小心把某个方块的坐标/尺寸设置成了全局变量，导致所有填充方块都叠加在同一个位置，看起来就像只显示了一个。

3. 快速验证方法 #

在动画循环里打印两个数组的长度，先确认数据层面有没有问题：

console.log("空心方块数量：", hollowBlocks.length);
console.log("填充方块数量：", filledBlocks.length);

如果填充方块的长度一直是1，那肯定是数组添加逻辑错了；如果长度正常，再检查每个填充方块的draw方法，看fillRect的参数（x、y、宽高）是不是被错误覆盖了。

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