javascript canvas如何绘图_怎样制作简单的浏览器游戏【教程】

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，否则切走再切回可能卡住方向
• 移动端没有键盘，这类控制需另配虚拟摇杆或触摸事件，不能复用同一套逻辑

实际做简单游戏时，最难缠的往往不是画一个方块，而是时间控制和输入响应的组合：比如跳跃逻辑要区分“刚按下”和“持续按住”，动画帧要和物理更新解耦，图片加载失败还不报错……这些细节不显眼，但一漏就卡半天。