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: Can

常见错误写法：

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 容易丢帧、卡顿，且无法感知页面是否被切走（比如用户切换标签页后还在疯狂执行逻辑）。

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

# 浏览器  # css  # win  # js  # 循环  # Property  # javascript  # java  # html  # 显示器  # Event  # NULL  # 封装  # canva  # 跨域 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】