HTML5canvas怎么实现简单动画_清除重绘requestAnimationFrame【解答】

requestAnimationFrame 更适合 canvas 动画因其自动对齐浏览器刷新节奏（通常60fps）、避免丢帧卡顿，且页面后台时自动暂停以节省资源；清除需用 cancelAnimationFrame(animationId) 配合唯一 ID，不可仅置 null。

requestAnimationFrame 为什么比 setTimeout 更适合 canvas 动画

因为 requestAnimationFrame 会自动对齐浏览器刷新节奏（通常 60fps），避免丢帧或卡顿；而 setTimeout 的执行时间不可控，容易导致动画不流畅或掉帧。更重要的是，页面切到后台时，requestAnimationFrame 会自动暂停，节省资源。

清除动画循环的正确方式：用 cancelAnimationFrame + 标识符

很多人以为直接设 animationId = null 就能停掉动画，其实不行——requestAnimationFrame 一旦发起，回调一定会执行一次，且没有内置“取消未触发回调”的机制。必须用 cancelAnimationFrame 主动中止。

• 每次调用 requestAnimationFrame 返回一个唯一数字 ID，记为 animationId
• 停止时调用 cancelAnimationFrame(animationId)
• 务必在回调函数里重新赋值 animationId = requestAnimationFrame(...)，否则无法持续

let animationId = null;
function animate() {
  // 清除上一帧绘制内容（关键！）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制逻辑（比如移动小球）
x += dx;
if (x > canvas.width || x < 0) dx = -dx;
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();
// 下一帧
animationId = requestAnimationFrame(animate);
}
// 启动
animationId = requestAnimationFrame(animate);
// 停止
function stopAnimation() {
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
}

clearRect 不是万能的：重绘前要确认 canvas 状态

clearRect 只清空像素，不会重置 canvas 的绘图状态（如 fillStyle、globalAlpha、transform）。如果动画中用了 ctx.save()/ctx.restore() 或多次 ctx.translate，不清除状态会导致后续绘制偏移或样式错乱。

• 简单动画：直接 clearRect(0, 0, canvas.width, canvas.height) 足够
• 带变换/裁剪的动画：建议每帧开头加 ctx.resetTransform()（现代浏览器支持）或手动 ctx.setTransform(1, 0, 0, 1, 0, 0)
• 如果用了 ctx.clip()，仅 clearRect 无法清除裁剪路径，需在 clearRect 前调用 ctx.restore()（配合提前 save）或重置路径

requestAnimationFrame 回调里的 this 指向和参数陷阱

传给 requestAnimationFrame 的函数，this 默认是 window，不是 canvas 或自定义对象；而且它会自动传入一个时间戳参数（DOMHighResTimeStamp），不是你期望的自定义参数。

• 不要写 requestAnimationFrame(animate(x, y)) —— 这会立即执行 animate 并把返回值传进去
• 需要传参时，用箭头函数或 bind：requestAnimationFrame(() => animate(x, y))
• 若依赖高精度时间做插值（比如缓动），用回调传入的时间戳，别用 Date.now() —— 前者更稳定、无时钟漂移

动画逻辑越靠近重绘入口越可控，别把状态更新藏在深层函数里，否则 cancelAnimationFrame 停了，状态还在悄悄变。