Canvas动画需用requestAnimationFrame递归驱动逐帧循环，因其同步屏幕刷新、省电精准；清屏后须重置绘图状态，小球运动需手动更新坐标并微调反弹位置，图片必须加载完成才能绘制。
Canvas 动画不是加个 animation CSS 属性就能跑起来的，它必须靠 JavaScript 主动清屏、重绘、更新状态，核心是 requestAnimationFrame 驱动的逐帧循环。
为什么不能用 setTimeout 或 setInterval
它们不和屏幕刷新率同步，容易掉帧、时间漂移，切到后台还继续执行耗电。而 requestAnimationFrame 会自动对齐显示器刷新节奏（通常是 60fps），且页面不可见时暂停，更省电也更准。
常见错误是只调一次：requestAnimationFrame(draw)，结果动画只画一帧就停了。
- 必须在动画函数末尾再次调用自己，形成递归链
- 别在循环里做耗时操作（比如遍历大数组、JSON.parse、触发 layout）
- 启动前确保 canvas 尺寸已确定，否则可能因缩放导致坐标错乱
clearRect 清屏后图形还残留？
因为 clearRect 只擦像素，不重置绘图状态。如果上一帧设置了 ctx.globalAlpha = 0.5 或 ctx.lineWidth = 4，下一帧继续画，就会叠加变糊、变粗、变深。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法：
ctx.clearRect(0, 0, canvas.width, canvas.height) - 每次清屏后手动重置关键状态：如
ctx.globalAlpha = 1、ctx.setTransform(1, 0, 0, 1, 0, 0) - 避免在每帧都用
save()/restore()，开销大；优先用setTransform重置变换矩阵 - 若只动局部（比如一个图标），可用
clearRect(x, y, w, h)擦“脏区域”，但需自己算包围矩形
小球动起来：位置更新 + 边界反弹的最小闭环
Canvas 不管对象，所有运动都靠你手动算坐标。最简模型就是每帧给 x、y 加上速度 vx、vy，碰到边缘翻转方向。
- 速度别用整数（如
vx = 2），用小数（vx = 2.3）才能平滑；整数容易因像素对齐抖动 - 边界判断别写
=== 0，要用<= 0或>= canvas.width - diameter，否则高速下会跳过临界帧 - 反弹后建议微调位置，比如
x = 0; vx = -Math.abs(vx)，防止卡在边缘反复触发判定 - 记得在
draw前调beginPath()，否则多条路径连成一团
真正容易被忽略的是：动画逻辑一旦涉及图片（drawImage），90% 的黑屏、错位、报错（如 Failed to execute 'drawImage': The image argument is a canvas element with a width or height of 0）都源于图片还没加载完就绘制——必须等 img.onload 触发后再启动循环，或用 img.complete 做前置判断。
