canvas动画中未清除上一帧会导致方块看似不断拉伸，实际是历史绘制残留叠加所致；只需在每帧开始时调用 clearrect() 清空画布即可实现平滑、等宽的移动效果。
canvas动画中未清除上一帧会导致方块看似不断拉伸，实际是历史绘制残留叠加所致；只需在每帧开始时调用 clearrect() 清空画布即可实现平滑、等宽的移动效果。
在使用 HTML5 Canvas 进行基础动画开发时，一个常见误区是：只绘制新位置，却忽略清除旧内容。正如示例代码中所示，每次调用 context.fillRect(px, 0, 100, 100) 都会在画布上“叠加”一个新方块，而之前的方块依然保留在画布上——这并非方块变宽，而是多个固定宽度（100px）的矩形沿 X 轴依次排列，视觉上形成向右“拉伸”的错觉。
正确做法是在每一帧动画的最开始，用 clearRect() 完全覆盖整个画布区域：
function move() {
// ✅ 关键步骤：清除整张画布，避免残留
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制当前帧的方块（位置由 px 控制）
context.fillRect(px, 0, 100, 100);
// 更新位置
if (directx.right) {
px += speed;
} else if (directx.left) {
px -= speed;
}
requestAnimationFrame(move);
}
⚠️ 注意事项：
- clearRect(x, y, width, height) 的坐标和尺寸需与画布实际渲染尺寸一致。本例中直接使用 canvas.width 和 canvas.height，确保完全覆盖；
- 不要仅靠 canvas.width = canvas.width（重设 canvas width 属性）来清屏——虽然它会重置上下文，但会丢失所有状态（如 strokeStyle、font 等），且性能不如 clearRect 稳定；
- 若需保留背景（如渐变或图像），可先绘制背景层，再绘制动态对象，而非清空整画布；
- 键盘事件监听建议补充 keyup 逻辑以支持按键松开后停止移动，提升交互体验（当前代码为持续移动，未做释放处理）。
总结：Canvas 是位图绘图环境，不具备自动图层管理或场景刷新机制。实现流畅动画的核心原则是——每帧 = 清屏 + 重绘 + 更新状态。掌握这一循环范式，是迈向复杂 Canvas 应用（如游戏、可视化图表）的坚实第一步。
