javascript - 使用无限滚动时 Canvas 最终太大而无法写入

Question

对于我的 tumblr 主题，我在 canvas 上画东西作为背景，但是使用无限滚动在 canvas 之前不会花太长时间太大而无法绘制(取决于浏览器等 - 尚未达到 Chrome 的限制)。

我正在使用 canvas，因为它被建议用于填充帖子之间的空白(在 packery 中)here ，但我想知道创建一个带有背景 block 的绝对定位元素是否是一个更糟糕的解决方案，在调整大小/重新布局时销毁和重新创建。

最好的解决方案是什么？每当加载更多帖子时，我是否应该在 javascript 中即时创建更多 Canvas ？如果是这样，最好的方法是什么？废弃 Canvas 并使用绝对定位的元素代替是不是一个可怕的想法？

Answer 1

不不不。在做无限滚动时，你需要做两件事(一个或另一个，或两者)

1) 滚动背景纹理

不要为背景创建巨大的纹理或图像。创建一个图案，它是一个图像，可以无缝地一次又一次地一个接一个地重复。

然后偏移图案以产生运动效果，但实际上您只是在创建初始坐标的位移。在某些游戏引擎上，纹理需要设置为“重复”，但在 HTML5 Canvas 上“重复”是默认设置。

查看这两篇文章以了解您正在寻找的模式和翻译命令:

Canvas pattern offset

Moving the start position of canvas pattern

2) 创建和摧毁障碍物(用于游戏)

有两组障碍物，一组当前在屏幕上呈现，另一组即将进入屏幕。将它们向左移动(假设滚动条是水平的)，一旦第一组障碍物离开屏幕，第二组障碍物当前可见，销毁第一组障碍物的所有对象并创建一个新的设置屏幕进入正确的区域。这样一来，您总是只有两组障碍物，而不是无限多或非常多的障碍物。

我通常有一个不可见的障碍物和障碍物的末端设置，以便通过仅检查一个对象而不是所有对象来轻松检测障碍物何时不再可见。

您也可以对背景执行此操作作为方法 1 的替代方法，使用复制的图案纹理(无缝可修复图像)。始终绘制两个并以相同的速度移动它们，一旦一个离开屏幕到左侧，将其移动到右侧并再次向左移动。

我发现了这个使用这种技术滚动背景的好例子:

HTML5 Canvas Game: Panning a Background