Canvas动画核心是“清空—重绘—循环”：每次用requestAnimationFrame驱动，先清除画布，再依JS维护的状态（如x、y、speed）重绘图形，实现视觉连续动画；其为即时模式绘图，不保存对象，无内置交互与更新接口。
Canvas 绘图和动画的核心在于“清空—重绘—循环”：每次动画帧先清除画布，再按新状态绘制图形，通
过 requestAnimationFrame 高效驱动这一过程，形成视觉连续的动画效果。
Canvas 绘图本质是即时模式绘图
Canvas 不保存图形对象（不像 SVG 那样有 DOM 节点），而是一块像素画布。调用 fillRect()、arc()、stroke() 等方法时，只是把当前路径或形状立刻“烧录”到像素上，之后就不再跟踪该图形。这意味着：
- 要修改图形位置/颜色/大小，必须重新调用绘图命令
- 没有内置的“移动对象”或“更新属性”接口，所有状态需由 JS 手动维护（如 x、y、speed）
- 无法直接监听图形点击事件，需自行做坐标计算（碰撞检测）
动画靠反复重绘 + 时间驱动
动画不是 Canvas 的内置功能，而是开发者用 JS 控制的视觉错觉。关键三步：
-
维护状态：用变量记录图形的位置、角度、缩放、颜色等（例如
ball.x += ball.vx） -
清空画布：用
ctx.clearRect(0, 0, canvas.width, canvas.height)或覆盖全屏背景色擦除上一帧 -
按新状态重绘：用当前变量值调用绘图 API（例如
ctx.fillRect(ball.x, ball.y, 20, 20)）
用 requestAnimationFrame(callback) 替代 setTimeout 是关键——它让浏览器在下一次屏幕刷新前执行绘制，保证 60fps 流畅且省电。
性能优化的几个实用要点
避免卡顿和掉帧，要注意：
- 只清空需要更新的区域（如小球移动范围），而非整张画布；但多数情况直接
clearRect更简单可靠 - 减少不必要的绘图调用，比如静态背景可单独绘制一次，动画层叠加其上
- 使用
transform（如ctx.translate()、ctx.rotate()）代替手动计算坐标，更简洁且支持硬件加速 - 复杂图形可预先绘制到离屏 canvas（
document.createElement('canvas')），再用drawImage()快速贴图
一个最小可运行动画示例
画一个小球从左向右匀速运动：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
const dx = 2;
function animate() {
// 清空
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新
x += dx;
if (x > canvas.width + 20) x = -20;
// 重绘
ctx.beginPath();
ctx.arc(x, 50, 10, 0, Math.PI * 2);
ctx.fill();
// 下一帧
requestAnimationFrame(animate);
}
animate();
这段代码体现了全部核心逻辑：状态更新 → 清空 → 绘制 → 循环。
