javascript - Canvas : drawImage method fails without error

Question

一点背景:

我正在制作一个基于浏览器的 2d 游戏。渲染代码将移动对象和风景对象分成两组，然后将每组整体绘制到 8192x8192 的 Canvas 上，不直接显示。仅当该组中的某些内容以某种方式发生变化时才会这样做。对于所有帧，执行以下操作:

canvas.drawImage(
  zoneBufferStatic,
  Math.floor((w / 2 - playerX) * tileSize),
  Math.floor((h / 2 - playerY) * tileSize)
);
canvas.drawImage(
  zoneBufferDynamic,
  Math.floor((w / 2 - playerX) * tileSize),
  Math.floor((h / 2 - playerY) * tileSize)
);

(其中 canvas 是用户可见 Canvas 的 2d 上下文；zoneBufferStatic 和 zoneBufferDynamic 分别是风景和移动物体的屏幕外 Canvas ；w 和 h 是用户的宽度和高度- 瓦片中的可见 Canvas ；playerX 和 playerY 是玩家的位置，同样在瓦片中；tileSize 是瓦片侧面的像素数，目前为 32)

UI(聊天文本、对话框)直接绘制在可见 Canvas 上。

上面显示的两个 drawImage 调用在我的桌面(16GB RAM，i7，GTX 780)上完全正常工作，但在我的 Chromebook(Samsung ARM(代号 daisy，snow)，2GB RAM)上什么也不做。界面正常显示，但从未显示风景和人物。 Chrome 的开发者控制台中没有错误。我已确认使用 document.body.appendChild(zoneBufferStatic) 绘制后台缓冲区在 Chrome 开发者控制台中。

有没有更好的方法来做到这一点，或者(非hacky)方法来检测它何时失败，以便我可以直接在可见 Canvas 上绘图？

Answer 1

Chromebook 是否有可能内存不足而导致出现问题？如果每个像素是 4 字节 (RGBA)，并且您在内存 (8192x8192) 中有 6710 万像素，那么这几乎是 250Mb 的 RAM。如果您有一堆其他程序正在运行或选项卡打开以及使用 RAM 的操作系统，我猜您可能很容易用完 RAM。如今，2Gb 的内存并不多。