Canvas:drawImage方法失败而没有错误

Question

一点背景:

我正在制作一款基于浏览器的2D游戏.渲染代码将移动的对象和场景对象分成两组,然后将每个组全部绘制到8192x8192画布上,该画布不会直接显示.仅当该组中的某些内容以某种方式更改时才会执行此操作.对于所有帧,完成以下操作:

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用户可见画布的2d上下文; zoneBufferStatic以及zoneBufferDynamic分别用于场景和移动对象的屏幕外画布; w以及h用户可见画布在画面中的宽度和高度; playerX以及playerY玩家的位置,同样在画面中;并且tileSize是图块一侧的像素数,目前为32)

UI(聊天文本,对话框)直接在可见画布上绘制.

---

上面显示的两个drawImage调用在我的桌面上完全正常工作(16GB RAM,i7,GTX 780),但我的Chromebook(三星ARM(codenames daisy,snow),2GB RAM)什么都不做.UI正常显示,但不会显示风景和字符.Chrome的开发者控制台中没有错误.我已经确认document.body.appendChild(zoneBufferStatic)在Chrome开发者控制台中使用了后台缓冲区.

有没有更好的方法来做到这一点,或者(非hacky)方式来检测它什么时候失败所以我可以回到直接在可见画布上绘图？

Answer 1

Chromebook 是否有可能内存不足而导致出现问题？如果每个像素为 4 字节 (RGBA)，并且内存中有 6710 万个像素 (8192x8192)，则几乎需要 250Mb RAM。如果您正在运行大量其他程序或打开选项卡，再加上使用 RAM 的操作系统，我猜您可能很容易就会耗尽 RAM。如今 2Gb 内存已经不算什么了。