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 停了，状态还在悄悄变。
