如何拥有无限大的画布？

我正在构建一个使用画布进行绘图的网络应用程序。我想要一个无限大的绘图空间（您可以在任何方向上滚动任意长的距离）并将数据/图像保存到数据库中。

已经做了与这里类似的事情：http://wordsquared.com/ http://wordsquared.com/，玩的人越多，它就越大。

我知道这需要以某种方式平铺图像，将它们保存到数据库中，然后只加载视口中的图像。如何完成此操作和无限滚动/我应该从哪里开始？

这是一种有点非常规的方法，但让我震惊的是潜在的（理论上，具有无限的存储空间）无限。

您将需要存储当前加载的板块，以某种唯一 ID 的形式给出。块及其数据需要位于包含以下列的表中：

• Chunk ID
• 块数据
• 北边块的ID
• 南方ID
• 东区ID
• 西部ID

您需要使画布可拖动，也许可以使用 jQuery 或类似的方法（这个问题 https://stackoverflow.com/questions/5685713/html5-drag-a-canvas有一些相关信息）。

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

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

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

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

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

Edit:我相信这符合基本功能：http://candrews.net/blog/2010/10/introducing-sprymap/ http://candrews.net/blog/2010/10/introducing-sprymap/它是一个轻量级的可拖动 JavaScript 地图。那么您只需要跟踪距离就可以了。