canvas动画本质是requestanimationframe驱动的逐帧清屏重绘，需手动更新对象状态、用clearrect配合状态重置防叠加模糊，并避免像素操作、频繁创建对象等性能陷阱。
Canvas 动画不是“加个动画属性”就能跑起来的，它本质是靠反复清屏 + 重绘实现的视觉暂留效果，核心在于 requestAnimationFrame 控制帧率、clearRect 管理画面状态、以及对象位置/状态的逐帧更新。
怎么用 requestAnimationFrame 替代 setTimeout 写主循环
用 setTimeout 容易掉帧、时间不准，requestAnimationFrame 会自动对齐屏幕刷新率（通常是 60fps），且页面切到后台时自动暂停，省电又安全。
实操建议：
- 必须把动画逻辑封装进一个函数里，再传给
requestAnimationFrame，不能直接写requestAnimationFrame(draw)后就结束——否则只执行一次 - 函数末尾要再次调用
requestAnimationFrame，形成递归调用链 - 别在循环里做耗时操作（比如遍历大数组、触发重排），否则直接卡顿
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update(); // 更新小球 x/y、速度等
render(); // 绘制小球
requestAnimationFrame(animate); // 关键：自己调自己
}
requestAnimationFrame(animate);
clearRect 清屏不彻底？常见漏点在哪
清屏只是擦掉像素，不会重置绘图状态（比如 fillStyle、globalAlpha、lineWidth）。如果上一帧设置了半透明填充，不清除状态，下一帧叠加绘制就会越来越“糊”。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 动画物体边缘发虚、颜色变深
- 旋转图形越转越粗（因为
stroke多次叠加） - 文字模糊、阴影堆叠
实操建议：
- 每次
clearRect后，显式重置关键状态：如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）才能体现平滑感；整数容易因像素对齐产生抖动 - 边界判断必须用
和 <code>>= canvas.width - diameter，不能只写=== 0——因为速度可能跳过精确等于 0 的帧 - 反弹后建议微调位置（如
x = 0; vx = -Math.abs(vx)），防止下帧又被判定为越界，卡在边缘抖动
function update() {
x += vx;
y += vy;
if (x <= 0 || x >= canvas.width - size) vx *= -1;
if (y <= 0 || y >= canvas.height - size) vy *= -1;
}Canvas 动画卡顿？先盯这三个地方
卡顿 rarely 是 Canvas 本身的问题，大概率出在你的代码结构或资源使用上。
最容易被忽略的瓶颈点：
-
getImageData/putImageData：每帧读写像素数据是重量级操作，能不用就不用；真要图像处理，考虑 Web Workers 或OffscreenCanvas - 频繁创建对象：比如每帧 new 一个
Path2D或临时数组，会触发 GC，造成偶发卡顿；复用对象或用 Pool 管理 - 监听了
resize但没节流：窗口拖拽时高频触发 canvas 重设宽高，会清空缓冲、重置上下文，打断动画流
Canvas 动画的“复杂点”不在怎么画，而在于你怎么管状态、控节奏、避陷阱——画布是白纸，但纸上的每一笔，都得你自己记清楚谁画过、谁该擦、谁还没动。
