requestAnimationFrame实现Canvas动画必须形成自调用链，即在animate函数末尾再次调用requestAnimationFrame(animate)，否则仅执行单帧；需配合clearRect清屏、状态重置（如globalAlpha、变换矩阵）及精确边界处理，避免残影、抖动或掉帧。
用 requestAnimationFrame 做 canvas 动画循环，不是“加个函数就动起来”，而是必须形成自调用链、配合清屏与状态管理，否则只跑一帧或越跑越糊。
为什么不能直接写 requestAnimationFrame(draw) 就完事
它只触发一次绘制，不是循环。浏览器不会自动重复调用——你得在 draw 函数末尾再手动调一次 requestAnimationFrame，才能维持帧流。
- 错误写法：
requestAnimationFrame(draw);（函数外单次调用） - 正确结构：函数内部末尾必须有
requestAnimationFrame(animate);，且该函数名要和传入的一致 - 别把逻辑塞进匿名函数里，比如
requestAnimationFrame(() => { ... });—— 这样没法在内部再调自己 - 如果动画中途要暂停，别靠 cancelAnimationFrame 硬砍；更稳妥的是加个开关变量，在函数开头 return，避免递归继续
clearRect 清不干净的三个常见漏点
残影、颜色变深、线条越来越粗，90% 是因为 clearRect 只擦像素，不重置绘图状态。
- 没重置
globalAlpha：上一帧设了 0.5 透明度，下一帧又 fill，叠加两次就变成 0.25，越画越暗 - 没重置变换矩阵：用了
ctx.translate或rotate后没setTransform(1,0,0,1,0,0)，后续所有绘图坐标都会偏移累积 - 清错区域：写了
clearRect(0,0,100,100)，但 canvas 实际是 800×600，其余区域全留着旧内容 - 替代方案：真想省性能，可算“脏矩形”——即上一帧图形包围盒与当前帧新位置包围盒的并集，但首次绘制前仍需全屏清一次
小球动起来却抖、卡边、掉帧？检查这四件事
位移类动画看似简单，实则对数值精度、边界判断和帧节奏极其敏感。
立即学习“前端免费学习笔记（深入）”；
- 速度别用整数：
vx = 2容易因像素对齐产生跳帧感；改用vx = 2.37或带时间缩放的vx *= deltaTime / 16 - 边界判断别用
===：if (x === 0)极可能跳过，应写成if (x = canvas.width - diameter) - 反弹后要微调位置：否则下帧又触发同条件，陷入“判定越界 → 反弹 → 再判定越界”死循环，表现就是贴墙抖动
- 别在循环里做耗时操作：比如每帧都
document.getElementById、getComputedStyle或新建对象（new Path2D()），这些会直接拖垮帧率
图片动画黑屏/报错 Failed to execute 'drawImage' 怎么办
绝大多数是资源没就绪就开画，或坐标传错。Canvas 不等图片，它只认“此刻有没有宽高”。
- 必须等
img.onload触发后再启动动画循环；img.complete && img.naturalWidth > 0也可作为安全判断 - 别在动画函数里
new Image()，那等于每帧都发起网络请求（即使 src 相同） -
drawImage(img, dx, dy)最少要 3 个参数；若想裁剪，必须传满 9 个：drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) - 雪碧图动画记得动态算
sx：比如每帧宽 64px，第i帧就是sx = i * 64，别写死
真正难的不是让东西动起来，而是动得稳、不动歪、不累积误差——每一帧都在补上一帧留下的状态尾巴，这才是 canvas 动画最常被忽略的底层契约。
