HTML5和画布滚动:诡计有趣还是无用？

Question

我已经读过关于滚动的所有内容了：

构建HTML5画布/JS游戏

诸如此类：

• HTML5画布教程
• 柔滑的JavaScript动画的秘诀
• 谷歌搜索"HTML5滚动“
• 帆布小游戏
• 用HTML5画布构建一个垂直滚动射击游戏
• 数学可能
• CAAT JavaScript框架

(最近的一次是令人印象深刻的，但尽管几乎所有的事情都已经完成，但滚动一点也没有)。

这就是我所想的，但我并没有找到有价值的东西。我刚刚想到了一个想法，我想知道我是否应该花很多时间去思考这个问题，或者不去尝试(这就是为什么我要问这个问题)。

我打算玩一个滚动的马里奥游戏。

滚动的最大缺点是你必须重新绘制整个背景。我已经避免了雪碧/滚动的两个性能问题:创建两个画布，一个顶部：

• 背景
• 精灵

只需抹去精灵。

问题在于背景:我正在为“可视”画布制作背景的完整副本。(注意:闪烁没有问题，因为用JavaScript编写是一种阻塞操作，所有现代浏览器都处理垂直同步，因此不需要双重缓冲)。

这是我正在写的一个旧版本，但你会得到更大的印象：

测试HTML5

现在我想知道滚动:如果我做一个“背景div”而不是画布，使用适当的CSS (背景图像作为背景)，直接在图像上写瓷砖，然后改变CSS来模拟滚动呢？应该再快一点吗？如果是，为什么？有什么好主意吗？

Answer 1

我的最后结论是:经过多次尝试之后，包括Eirk建议，我直接将"raw“写入画布的隐藏部分，并使用CSS:所有的CSS浏览器都已经处理了图像闪烁和周围的所有内容，并且已经优化了所有内容。

所以每次我尝试“优化”，结果都会更糟。

网页浏览器似乎是用来处理初学者制作的基本内容的.也许是因为99%的HTML内容是由初学者制作的。

Answer 2

在具有半现代+浏览器的半现代+计算机上，最快的做法可能是使用带有背景图像的超长div，通过调整scrollLeft或scrollTop属性将溢出设置为隐藏并滚动。这比调整CSS属性要快得多，因为它不应该触发CSS引擎中的任何再流计算。基本上，每当您触摸可能会影响CSS的DOM属性时，文档的整个(或至少很多)结构都需要重新检查和重新呈现。

你可以加载大块的背景，因为他们得到接近，以避免一个巨大的巨大图像负载。我不认为有任何100%肯定的方法可以跨浏览器将图像从内存中提取出来，但是在DOM或CSS中删除对它的引用可能并不会对你的背景滚动到足够远的地方造成伤害。这样，浏览器的垃圾收集器至少可以选择清除内存。

的泛移动解决方案依赖于网络视图(如Cordova/Phonegap)，然而，，这就是我提出这个问题的原因。

我不知道，但我非常肯定，混合HTML和画布是一个糟糕的想法，以性能为目的。现在，我已经有了一个不太复杂的android游戏，它被50x50 100 mix的瓷砖呛住了，在android web视图中的画布元素中也有一些基本的HTML，用于控件之类的东西，并将其他几个画布元素与其他元素分离开来。我基本上有一个鸟瞰船巡航和做扫描一个俗气的辐射圆引力，揭示在地图上的元素雾-战争风格。在浏览器中工作得很好。在cordova应用程序版本中完成灾难。

我怀疑实现我的泛移动游戏开发梦想的唯一方法是使用许多openGL包在画布中的API解决方案之一，并且完全抛弃HTML，因为我发现HTML非常方便UI的实现，因为我的大部分经验都在web UI中。web视图HTML的另一个一般提示是，如果可以的话，避免在内部元素中滚动(所以让主体处理溢出即可)。滚动溢出的任何东西，但身体甚至没有工作在Android 2的网页视图，它似乎仍然导致4.1的意见，以窒息一个更早的/更简单的版本的应用程序，我正在工作。

Answer 3

最快的滚动是使用CSS滚动。因此，您只绘制一次所有的背景，不仅是可见的部分，但所有，隐藏是不可见的，并使用css滚动它(边距，或位置)。没有重绘，只有CSS更改。这工作速度真快。但是如果所有的地图都是巨大的，其他的定制方式可能会更好。