画布：drawImage 方法失败且没有错误

Posted 2023-03-04

【中文标题】画布：drawImage 方法失败且没有错误

【英文标题】：Canvas: drawImage method fails without error

【发布时间】：2013-08-10 05:41:26

【问题描述】：

一点背景：

我正在制作一个基于浏览器的 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 是用户可见画布的二维上下文；zoneBufferStatic 和 zoneBufferDynamic 分别是风景和移动物体的屏幕外画布；w 和 h 是宽度和高度瓷砖中用户可见的画布；playerX 和 playerY 是玩家的位置，同样在瓷砖中；tileSize 是瓷砖侧面的像素数，目前是 32)

UI（聊天文本、对话框）直接绘制在可见画布上。

---

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

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

【问题讨论】：

@Stano 在 Firefox 中没有消息，但在 Firefox 中渲染效果很好。再说一次，我的桌面上只有 Firefox。

@Stano 该函数不会停止 - 在两次 drawImage 调用之前和之后调用的东西仍然可以在 Chromebook 上运行。两个 drawImage 调用似乎被默默地忽略了。

Maximum size of a <canvas> element 的可能副本此线程中的另一个用户***.com/questions/18122328/… 说他可以使用 15000 像素。这将因浏览器而异。查看我在该线程中的答案以了解可能的解决方法。

@Ken “后台缓冲区”画布的绘制没有问题。正是这些画布在主（可见）画布上的绘制默默地失败了。

@BenLubar 你有没有在这里解决过这个问题？我得到了一些类似的东西，但在 iPad 上..

【参考方案1】：

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