如何拥有无限大的画布？

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

在这里做了类似的事情：http://wordsquared.com/，玩的越多，得到的就越大。

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

2011-08-28 sdfadfaasd

你不能拥有它是无限的，不正确的，你不想只加载下一大块的方向，因为你最终会打你的坐标系统的限制。你想要做的是不断重新画布并跟踪画布，当中心到达加载区域的边缘时加载新的块。 – ssube

我的意思是你滚动得越多，它就越大。当然，我需要设置一个限制EVENTUALLY，但是我希望得到的尺寸和我设置的一样大。 – sdfadfaasd

可能重复的[使画布无限]（http://stackoverflow.com/questions/38589304/make-a-canvas-infinite） – bummi

这是一个非常规的方法，但只是让我感到可能（理论上讲，与未绑定的存储空间）无限。

您将需要存储当前加载的板块，作为某种唯一ID给出。该块和他们的数据必须在表中有以下的列：

的

ID，您需要做画布拖动，也许使用jQueryØ r类似（this question有一些信息）。

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

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

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

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

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

编辑：我相信这是一起的基本功能的线路： http://candrews.net/blog/2010/10/introducing-sprymap/ 它是一个轻量级的JavaScript拖动地图。那么你只需要追踪多远。

2011-08-28 02:59:22 ssube

嗯..这当然不是传统的，但它可能是最实际和最简单的方法我还没有听说过。我认为最好让每个tile都是一个像（1000px x 1000px）这样的整个大型html canvas，这样很容易保存和加载所有的数据 – sdfadfaasd

我已经制作了一个库来处理这个名为TiledCanvas 它提供了缩放和移动的界面。并使用所有的帆布apis在无限的空间中绘制。

它可以让你基于坐标动态加载块，你只需要给它一个函数，它可以作为参数获得一个x，y和回调函数，并且只需将它返回到可以在画布上绘制的东西即可。

2016-12-31 16:31:41 urban

回答