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

Canvas: drawImage method fails without error

本文关键字：有错误 失败 方法 drawImage Canvas      更新时间：2023-09-26

一个小背景：

我正在制作一款基于二维浏览器的游戏。渲染代码将移动对象和场景对象拆分为两组，然后将每组整体绘制到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（代号daisy、snow）、2GB RAM）上什么都没用。UI显示正常，但从不显示场景和字符。Chrome的开发者控制台中没有错误。我已经确认，后台缓冲区是使用Chrome开发人员控制台中的document.body.appendChild(zoneBufferStatic)绘制的。

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

Chromebook是否可能内存不足，从而导致问题？如果每个像素是4个字节（RGBA），并且内存中有6710万像素（8192x8192），那么这几乎是250Mb的RAM。如果你有一堆其他程序在运行或选项卡打开，再加上操作系统使用RAM，我想你很容易就会耗尽RAM。现在2Gb的内存不多了。

相关文章：