Javascript 如何拥有无限大的画布？

我正在构建一个使用画布绘制的web应用程序。我希望有一个无限大的绘图空间（你可以在任何方向上随意滚动），并将数据/图像保存到数据库中

这里也做了类似的事情：，玩它的人越多，它就越大

---

我知道这需要以某种方式平铺图像，将它们保存到db中，然后只在视口中放置图像。如何实现这一点和无限滚动/我应该从哪里开始？

这是一种有点非传统的方法，但我觉得它可能是无限的（理论上，使用未绑定的存储空间）

您将需要存储当前加载的电路板块，作为某种类型的唯一ID。块及其数据需要位于具有以下列的表中：

• 区块ID
• 块数据
• 北面的区块ID
• 南方身份证
• 东区身份证
• 西部身份证

您需要使用jQuery或类似工具（有一些相关信息）使画布可拖动

现在，为要拖动的画布创建一个事件侦听器，并跟踪其移动的距离。释放时，如果画布未更改为其他块，则不执行任何操作

如果画布已离开当前区块，请使用存储的ID查找下一个要加载的区块。如果ID为0，则假定该块尚不存在，并创建它。否则，加载区块，替换现有区块。将画布设置回居中

有了足够长的ID和足够的存储空间，这将为您提供一个无限的画布，因为没有使用坐标系。它还允许包裹边缘，或创建虫洞

如何实现它，我不太确定，但您只需要跟踪画布移动了多远。谷歌地图也做了类似的事情，所以我会看看他们是如何处理的（我很快就会这么做，看看是否可以在这个答案中添加一些实现细节）

这可能不是最实用或最简单的方法，但想出这个方法很有趣

编辑：我相信这与基本功能是一致的：

---

它是一个轻量级的可拖动javascript映射。您只需跟踪距离。

我创建了一个库来处理这个问题，称为TiledCanvas 它提供了缩放和移动界面。并使用所有画布API在无限空间中绘制

它允许您根据坐标动态加载块，您只需给它一个函数，该函数作为参数获得x、y和回调，然后您只需将可以在画布上绘制的内容返回给它

---

你不能让它是无限的，不正确的，你也不想只在一个方向上加载下一个块，因为你最终会到达坐标系的极限。你要做的是不断地重新居中画布并跟踪它，当中心到达加载区域的边缘时加载新的块。我的意思是你滚动的越多，它就越大。当然，我最终需要设定一个限制，但我想要一个能达到我设定的最大规模的东西。可能是重复的。。这当然不是传统的方法，但它可能是我听过的最实用、最简单的方法。我想最好是让每个图块都像（1000px x 1000px）一样是一个完整的html画布，这样可以很容易地保存和加载所有数据