对于我的tumblr主题,我在canvas
上绘制背景,但是使用无限滚动并不需要太长时间,canvas
太大而无法绘制(取决于浏览器等-尚未达到Chrome的限制)。
我正在使用canvas
,因为它被建议在这里填充帖子之间的空白(在包装中),但我想知道它是否会是一个更糟糕的解决方案,以创建一个具有背景块的绝对定位元素,而不是在调整大小/重新布局上破坏和重新创建。
最好的解决方案是什么?我是否应该在javascript中创建更多的画布,无论何时加载更多的帖子,如果是这样,最好的方法是什么?抛弃画布并使用绝对定位元素会是一个糟糕的想法吗?
不不不。当你做一个无限滚动时,你需要做两件事(一个或另一个,或两个)
1)滚动背景纹理不要为背景创建巨大的纹理或图像。创建一种模式,这种模式是一种图像,可以无缝地重复一遍又一遍,一个接一个。
然后偏移图案以获得移动的效果,但实际上你只是在创建初始坐标的位移。在某些游戏引擎上,纹理需要设置为"重复",但在HTML5画布上,"重复"是默认设置。
查看这两篇文章,了解模式和翻译命令,这是你正在寻找的:
画布图案偏移
移动画布图案的起始位置
2)创造和摧毁障碍(对于游戏)
有两组障碍,一组当前呈现在屏幕上,另一组即将进入屏幕。将它们向左移动(假设滚轮是水平的),当第一组障碍离开屏幕,第二组障碍当前可见时,摧毁第一组障碍的所有对象,并在屏幕右侧区域创建一组新对象。这样你就只有两组障碍,而不是无穷多或非常多的障碍。
我通常有一个不可见的障碍和障碍集的末尾,以便通过只检查一个对象而不是所有对象来轻松检测障碍物何时不再可见。
你也可以为背景做这个,作为方法1的替代方法,使用复制的图案纹理(无缝可修复的图像)。总是画出两个并以相同的速度移动它们,一旦其中一个离开屏幕向左移动,将其移动到右侧,并再次保持向左移动。
我找到了一个使用这种技术滚动背景的好例子:
HTML5 Canvas Game:平移背景
正确的答案似乎是,"不要使用画布,你这个白痴。"
我用绝对定位的div元素重新做了这个。案例关闭。