使用分层画布来优化HTML5渲染的教程_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用分层画布来优化HTML5渲染的教程_html5教程技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含17889字，纯文字阅读大概需要26分钟。
内容图文
简介
通常情况下，在玩 2D 游戏或渲染 HTML5 画布时，需要执行优化，以便使用多个层来构建一个合成的场景。在 OpenGL 或 WebGL 等低级别渲染中，通过逐帧地清理和绘制场景来执行渲染。实现渲染之后，需要优化游戏，以减少渲染的量，所需成本因情况而异。因为画布是一个 DOM 元素，它使您能够对多个画布进行分层，以此作为一种优化方法。
常用的缩写
- CSS: Cascading Style Sheets（级联样式表）
DOM: Document Object Model（文档对象模型）
HTML: HyperText Markup Language（超文本标记语言）
本文将探讨对画布进行分层的合理性。了解 DOM 设置，从而实现分层的画布。使用分层进行优化需要各种实践。本文还将探讨一些优化策略的概念和技术，它们扩展了分层方法。
您可以下载在本文中使用的示例的源代码。
选择优化策略
选择最佳优化策略可能很难。在选择分层的场景时，需要考虑场景是如何组成的。大屏幕上固定物的渲染经常需要重用若干个组件，它们是进行研究的极佳候选人。视差或动画实体等效果往往需要大量的变化的屏幕空间。在探索您的最佳优化策略时，最好注意这些情况。虽然画布的分层优化需要采用几种不同的技术，但在正确应用这些技术后，往往会大幅提升性能。
设置层
在使用分层的方法时，第一步是在 DOM 上设置画布。通常情况下，这很简单，只需定义画布元素，将其放入 DOM 中即可，但画布层可能需要一些额外的样式。在使用 CSS 时，成功地实现画布分层有两个要求：
各画布元素必须共存于视区 (viewport) 的同一位置上。
每个画布在另一个画布下面必须是可见的。
图 1显示了层设置背后的通用重叠概念。
图 1. 层示例
设置层的步骤如下：
- 将画布元素添加到 DOM。
添加画布元素定位样式，以便支持分层。
样式化画布元素，以便生成一个透明的背景。
设置画布重叠堆栈
在 CSS 中创建一个重叠堆栈 (overlay stack) 可能需要少量的样式。使用 HTML 和 CSS 有许多方法进行重叠。本文中的示例使用一个
清单 1. 画布定位样式
输出了一个比所需图像更大的图像。本文忽略这个特定的优化，但是，如果使用的空间比您的图像提供的空间小，那么请确保只渲染必要的补丁。
确定分层
现在您知道如何使用单一画布实现该示例，让我们看看有什么办法可以完善这种类型的场景，并加快渲染循环。要使用分层技术，则必须通过找出实体的渲染重叠，识别分层所需的 HTML5 画布元素。
重绘区域
为了确定是否存在重叠，要考虑一些被称为重绘区域的不可见区域。重绘区域是在绘制实体的图像时需要画布清除的区域。重绘区域对于渲染分析很重要，因为它们使您能够找到完善渲染场景的优化技术，如图 3所示。
图 3. 合成游戏视图与重绘区域
为了可视化图 3中的效果，在场景中的每个实体都有一个表示重绘区域的重叠，它跨越了视区宽度和实体的图像高度。场景可分为三组：背景、前景和交互。场景中的重绘区域有一个彩色的重叠，以区分不同的区域：
- 背景 – 黑色
云 – 红色
小山 – 绿色
地面 – 蓝色
红球 – 蓝色
黄色障碍物 – 蓝色
对于除了球和障碍物以外的所有重叠，重绘区域都会横跨视区宽度。这些实体的图像几乎填满整个屏幕。由于它们的平移要求，它们将渲染整个视区宽度，如图 4所示。预计球和障碍物会穿过该视区，并且可能拥有通过实体位置定义的各自的区域。如果您删除渲染到场景的图像，只留下重绘区域，就可以很容易地看到单独的图层。
图 4. 重绘区域
初始层是显而易见的，因为您可以注意到互相重叠的各个区域。由于球和障碍物区域覆盖了小山和地面，所以可将这些实体分组为一层，该层被称为交互层。根据游戏实体的渲染顺序，交互层是顶层。
找到附加层的另一种方法是收集没有重叠的所有区域。占据视区的红色、绿色和蓝色区域并没有重叠，并且它们组成了第二层——前景。云和交互实体的区域没有重叠，但因为球有可能跳跃到红色区域，所以您应该考虑将该实体作为一个单独的层。
对于黑色区域，可以很容易地推断出，背景实体将会组成最后一层。填充整个视区的任何区域（如背景实体）都应视为填充整个层中的该区域，虽然这对本场景并不适用。在定义了我们的三个层次之后，我们就可以开始将这层分配给画布，如图 5所示。
图 5. 分层的游戏视图
现在已经为每个分组的实体定义了层，现在就可以开始优化画布清除。此优化的目标是为了节省处理时间，可以通过减少每一步渲染的屏幕上的固定物数量来实现。需要重点注意的是，使用不同的策略可能会使图像获得更好的优化。下一节将探讨各种实体或层的优化方法。
渲染优化
优化实体是分层策略的核心。对实体进行分层，使得渲染策略可以被采用。通常，优化技术会试图消除开销。正如表 1所述，由于引入了层，您已经增加了内存开销。这里讨论的优化技术将减少处理器为了加快游戏而必须执行的大量工作。我们的目标是寻找一种减少要渲染的空间量的方法，并尽可能多地删除每一步中出现的渲染和清除调用。
单一实体清除
第一个优化方法针对的是清除空间，通过只清除组成该实体的屏幕子集来加快处理。首先减少与区域的各实体周围的透明像素重叠的重绘区域量。使用此技术的包括相对较小的实体，它们填充了视区的小区域。
第一个目标是球和障碍物实体。单一实体清除技术涉及到在将实体渲染到新位置之前清除前一帧渲染该实体的位置。我们会引入一个清除步骤到每个实体的渲染，并存储实体的图像的边界框。添加该步骤会修改实体对象，以包括清除步骤，如清单 5所示。
清单 5. 包含单框清除的实体
内容总结
以上是互联网集市为您收集整理的使用分层画布来优化HTML5渲染的教程_html5教程技巧全部内容，希望文章能够帮你解决使用分层画布来优化HTML5渲染的教程_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。