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

Question

对于我的 tumblr 主题，我正在canvas为背景绘制东西，但是使用无限滚动，它不会花费太长时间才能canvas绘制太大（取决于浏览器等 - 没有达到极限在 Chrome 中）。

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

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

score 0 · Accepted Answer

不不不。进行无限滚动时，您需要做两件事（一件或另一件，或两者兼而有之）

1) 滚动背景纹理

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

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

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

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

有两组障碍物，一组正在渲染在屏幕上，另一组即将进入屏幕。将它们向左移动（假设滚动条是水平的），一旦第一组障碍物离开屏幕，并且第二组障碍物当前可见，销毁第一组障碍物的所有对象并创建一个新的障碍物屏幕进入右侧区域。这样，您总是只有两组障碍，而不是无限数量或非常大的数量。

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

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

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

score 0 · Accepted Answer

正确的答案似乎是，“不要使用画布，你这个白痴。”

所以我用绝对定位的 div 元素重做了这件事。结案。

2 回答 2