★ ★ ★ ★ ★

Canvas 动画：用 HTML5 Canvas 做动画的大致步骤？

⚡ 速记答案（30 秒）

创建canvas获取上下文 → 定义状态和绘制函数 → 清空画布+绘制 → requestAnimationFrame循环。关键：时间步长deltaTime、双缓冲、避免频繁创建对象。

📖 详细讲解

标准面试回答（推荐记住）

用Canvas做动画的步骤：首先在HTML里创建canvas元素并获取2d或webgl上下文；然后定义动画状态（位置、速度、角度等）和绘制函数draw()；在draw()里先清空画布，再根据当前状态绘制图形；最后使用requestAnimationFrame做循环，每一帧更新状态再调用draw()。关键优化点包括：使用时间步长deltaTime保证不同帧率下动画一致、双缓冲或分层绘制、避免在动画循环中频繁创建对象。

动画循环核心模式

let lastTime = 0;

function animate(currentTime) {
  const deltaTime = currentTime - lastTime;
  lastTime = currentTime;
  
  update(deltaTime);  // 更新状态
  render();           // 绘制
  
  requestAnimationFrame(animate);
}

性能优化技巧

离屏Canvas：复杂静态内容预渲染
分层绘制：背景层和动画层分离
脏矩形：只重绘变化区域

✅ 面试要点

•掌握requestAnimationFrame的使用
•理解时间步长deltaTime的重要性
•知道常见的Canvas性能优化方法

💻 代码示例

Canvas 动画基础

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let x = 0;
let lastTime = 0;

function animate(currentTime) {
  const deltaTime = (currentTime - lastTime) / 1000;
  lastTime = currentTime;
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 更新状态
  x += 100 * deltaTime; // 100px/秒
  if (x > canvas.width) x = 0;
  
  // 绘制
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 100, 50, 50);
  
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);