簡介

　　通常情況下，在玩 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 轉換)時要小心。

　　透明的背景

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。