canvas 2d api 是零基础开发 html5 小游戏的首选入口，需用 getcontext(‘2d’)、requestanimationframe、clearrect 和 fillrect 实现基础动画，注意绘图坐标更新、canvas 像素尺寸设置、时间校准、按键状态机及 aabb 碰撞检测。
Canvas 2D API 是你第一个必须盯住的入口
零基础做 HTML5 小游戏，canvas 元素 + getContext('2d') 就是绕不开的起点。它不靠 DOM 操作，而是用 JS 直接画像素，性能可控、逻辑清晰，适合打地鼠、弹球、贪吃蛇这类 2D 游戏。
别一上来就碰 WebGL 或框架——那些会掩盖“怎么让一个方块动起来”这个最核心的问题。先用 requestAnimationFrame 驱动循环，用 clearRect 清屏，用 fillRect 画角色，三步就能跑通一帧逻辑。
- 常见错误：把
canvas当成普通 div，试图用style.left/top移动角色 → 实际要改的是绘制坐标（x,y）再重绘 - 容易忽略：
canvas默认宽高是 300×150 像素，CSS 设置只缩放显示，不改变绘图分辨率 → 必须同时设canvas.width和canvas.height属性 - 练手建议：写一个“键盘控制小方块移动”的 demo，只用
keydown监听 +requestAnimationFrame循环 +fillRect绘制，15 行内搞定
游戏循环里最常崩掉的其实是时间控制
新手写的“每帧移动 2 像素”，在不同设备上速度天差地别。不是帧率不稳定，而是没做时间校准。浏览器的 requestAnimationFrame 只保证“下一帧”，不保证“多久一帧”。
真正稳的写法是记录上一帧时间戳，算出本次耗时（deltaTime），再按比例更新位置：position += speed * deltaTime / 16（以 60fps 为基准）。这样哪怕掉帧，移动距离也一致。
立即学习“前端免费学习笔记（深入）”；
