手帐 Blog

主题

02 · Canvas + requestAnimationFrame：最小可玩循环 ​

目标：用 Vite + TypeScript 起一个固定尺寸画布，用 requestAnimationFrame 跑通「清屏 → 画 → 再约下一帧」，并引入 dt（帧间隔）。
官方：Canvas API · requestAnimationFrame

1. 为什么是 rAF，不是 setInterval ​

方式问题
setInterval(16)与显示器刷新不同步；后台标签仍猛跑；掉帧时堆叠难控
requestAnimationFrame跟屏幕刷新对齐；页不可见时浏览器会节流/暂停

前端里你用 rAF 做动画；游戏里它就是 渲染心跳。逻辑怎么跟心跳解耦，见 03。

2. 最小工程（本机敲一遍） ​

在任意练习目录：

bash
pnpm create vite arcade-lab --template vanilla-ts
cd arcade-lab
pnpm install
pnpm dev

index.html 里放画布：

html
<canvas id="game" width="480" height="640"></canvas>

src/main.ts：

ts
const canvas = document.querySelector<HTMLCanvasElement>('#game')!
const ctx = canvas.getContext('2d')!

let last = performance.now()

function frame(now: number) {
  const dt = (now - last) / 1000 // 秒
  last = now

  // 1) 清屏
  ctx.fillStyle = '#0b1220'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // 2) 画点东西（先证明循环在转）
  ctx.fillStyle = '#7dd3fc'
  const x = (now / 10) % canvas.width
  ctx.fillRect(x, canvas.height / 2 - 8, 16, 16)

  // 3) 约下一帧
  requestAnimationFrame(frame)
}

requestAnimationFrame(frame)

应看到方块水平扫过。控制台可临时 console.log(dt.toFixed(3)) 看帧间隔（约 0.016 ≈ 60Hz）。

3. 心智模型：一帧里发生什么 ​

text
rAF 回调
  ├─ 算 dt（距上一帧多久）
  ├─ update(dt)   ← 改位置、生成子弹……（本篇先极简）
  └─ render()     ← 只负责画当前状态

对照前端：更像「每帧强制重绘的 Pinia 快照」，而不是 DOM diff。

约定（本系列）：

  • 逻辑用世界坐标（像素即可，阶段一够用）
  • 渲染只读状态，不在 fillRect 里偷偷改血量

4. 固定画布 vs 自适应 ​

阶段一用 固定 480×640（竖版街机感），避免一上来就纠结 DPR / 响应式。
高清屏模糊、devicePixelRatio 缩放见 前端进阶 · Canvas；游戏篇先保证逻辑正确。

5. 常见坑 ​

坑处理
忘记清屏残影拖尾；每帧先 fillRect 整画布或 clearRect
把 dt 当毫秒又当秒统一用秒：(now - last) / 1000
在循环里 addEventListener监听器爆炸；输入监听放循环外（见 04）
getContext('2d') 为 null检查 canvas 是否在 DOM、选择器是否写对

验收清单 ​

  • [ ] pnpm dev 能打开带 canvas 的页面
  • [ ] 方块持续移动，不是只画一帧
  • [ ] 能口头解释 dt 是什么、单位是秒
  • [ ] 代码结构能分出「清屏 / 画 / rAF」三步

官方入口 ​

下一篇 ​

→ 03 · 渲染帧与逻辑帧：别把一切塞进一帧