canvas.getContext('2d') 是绘图唯一入口，漏调用则 fillRect 等方法报错；需确保 DOM 加载完成、检查返回值非 null、宽高设在 HTML 或 canvas.width/height；游戏主循环须用 requestAnimationFrame；图片需 onload 后绘制；键盘响应应监听 keydown/keyup 维护键状态。
canvas.getContext('2d') 是绘图的唯一入口，不调用它就什么都画不出来
Canvas 元素本身只是个“画布容器”，真正负责绘图的是 getContext('2d') 返回的渲染上下文对象。漏掉这一步，fillRect、strokeText 等所有绘图方法都会报错：TypeError: Cannot read property 'fillRect' of null。
常见错误写法：
const canvas = document.getElementById('game');
canvas.fillRect(0, 0, 100, 100); // ❌ 报错：fillRect is not a function
正确做法是先获取上下文，并确保 DOM 加载完成：
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); // ✅ 必须这一步
ctx.fillRect(0, 0, 100, 100); // ✅ 正常绘制
- 务必检查
getContext返回值是否为null（比如传了'webgl'但浏览器不支持） - 不要在
canvas元素还没插入 DOM 时就调用getContext，否则可能取到未初始化的尺寸 -
width和height应直接设在 HTML 属性或 JS 中的canvas.width/canvas.height上，而非 CSS；CSS 缩放会导致图像模糊且坐标错乱
游戏主循环用 requestAnimationFrame 而不是 setInterval
浏览器游戏需要稳定、与屏幕刷新率同步的帧更新，setInterval 容易丢帧、卡顿，且无法感知页面是否被切走（比如用户切换标签页后还在疯狂执行逻辑）。
立即学习“Java免费学习笔记（深入）”；
requestAnimationFrame 会自动暂停非活跃页面的调用，并尽可能对齐显示器刷新节奏（通常是 60fps）。
function gameLoop() {
update(); // 更新位置、碰撞等逻辑
render(); // 清屏 + 绘制所有对象
requestAnimationFrame(gameLoop); // ✅ 下一帧继续
}
requestAnimationFrame(gameLoop);
- 别在
render里直接写绘图逻辑——把clearRect放最前，否则画面会拖影 - 如果游戏逻辑需固定步长（比如物理模拟），不能只靠帧时间，要累积
deltaTime并做多次小步更新 - 移动端要注意
requestAnimationFrame在后台标签页中可能被节流甚至暂停，别依赖它做计时器
用 image.onload 确保图片加载完成再绘制，否则 canvas 显示空白
直接 new Image() 后立刻 drawImage，大概率什么也看不到——因为图片还没从网络或缓存加载完。Canvas 不会等待，只会静默跳过。
必须监听 load 事件，或使用 Promise 封装：
const img = new Image();
img.src = 'player.png';
img.onload = () => {
ctx.drawImage(img, x, y); // ✅ 此时才安全
};
- 如果图片路径错误或跨域受限，
onerror会被触发，但不会抛异常，容易误以为“画出来了” - 多个图片资源建议用
Promise.all统一等待，避免部分加载完成就开跑游戏循环 - 用
img.decode()可提前解码（尤其大图），防止首次 drawImage 时卡顿
键盘输入响应要靠 keydown/keyup 记状态，不能靠 keypress 或实时读 event.key
游戏里角色移动需要“按住持续移动”，而 keypress 只在字符输入时触发，且重复触发有延迟；event.key 在 keydown 里只能拿到单次按键，无法判断是否仍被按下。
标准做法是维护一个键位状态映射：
const keys = {};
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);
// 在 gameLoop 的 update 阶段检查：
if (keys['ArrowRight']) player.x += 5;
-
e.code比e.key更可靠（不受大小写/输入法影响，如 'KeyA' 始终对应 A 键） - 注意处理
blur事件：窗口失焦时清空 keys，否则切走再切回可能卡住方向 - 移动端没有键盘，这类控制需另配虚拟摇杆或触摸事件，不能复用同一套逻辑
