使用分层画布来优,化HTML5渲染的教程

　　简介

　　通常情况下，在玩 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. 画布定位样式

　　CSS Code复制内容到剪贴板

　　#viewport {

　　/**

　　* Position relative so that canvas elements

　　* inside of it will be relative to the parent

　　*/

　　position: relative;

　　}

　　#viewport canvas {

　　/**

　　* Position absolute provides canvases to be able

　　* to be layered on top of each other

　　* Be sure to remember a z-index!

　　*/

　　position: absolute;

　　}

　　容器

　　这些 HTML5 画布元素的顺序也很重要。可以按元素出现在 DOM 上的顺序进行顺序管理，也可以按照画布应该显示的顺序来样式化 z-index 样式，从而管理顺序。虽然并非总是如此，但其他样式可能也会影响渲染;在引入额外的样式(比如任何一种 CSS 转换)时要小心。

　　透明的背景

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。