這篇文章主要介紹了使用分層畫布來優化HTML5渲染的教程,來自於IBM官方網站開發者技術文檔,需要的朋友可以參考下簡介
通常情況下,在玩2D 遊戲或渲染HTML5 畫佈時,需要執行優化,以便使用多個層來構建一個合成的場景。在OpenGL 或WebGL 等低級別渲染中,通過逐幀地清理和繪製場景來執行渲染。實現渲染之後,需要優化遊戲,以減少渲染的量,所需成本因情況而異。因為畫布是一個DOM 元素,它使您能夠對多個畫布進行分層,以此作為一種優化方法。
常用的縮寫
DOM: Document Object Model(文檔對像模型)
HTML: HyperText Markup Language(超文本標記語言)
本文將探討對畫布進行分層的合理性。了解DOM 設置,從而實現分層的畫布。使用分層進行優化需要各種實踐。本文還將探討一些優化策略的概念和技術,它們擴展了分層方法。
您可以下載在本文中使用的示例的源代碼。
選擇優化策略
選擇最佳優化策略可能很難。在選擇分層的場景時,需要考慮場景是如何組成的。大屏幕上固定物的渲染經常需要重用若干個組件,它們是進行研究的極佳候選人。視差或動畫實體等效果往往需要大量的變化的屏幕空間。在探索您的最佳優化策略時,最好注意這些情況。雖然畫布的分層優化需要採用幾種不同的技術,但在正確應用這些技術後,往往會大幅提升性能。
設置層
在使用分層的方法時,第一步是在DOM 上設置畫布。通常情況下,這很簡單,只需定義畫布元素,將其放入DOM 中即可,但畫布層可能需要一些額外的樣式。在使用CSS 時,成功地實現畫布分層有兩個要求:
各畫布元素必須共存於視區(viewport) 的同一位置上。
每個畫佈在另一個畫布下面必須是可見的。
圖1顯示了層設置背後的通用重疊概念。
圖1. 層示例
設置層的步驟如下:
添加畫布元素定位樣式,以便支持分層。
樣式化畫布元素,以便生成一個透明的背景。
設置畫布重疊堆棧
在CSS 中創建一個重疊堆棧(overlay stack) 可能需要少量的樣式。使用HTML 和CSS 有許多方法進行重疊。本文中的示例使用一個<div>標籤來包含畫布。 <div>標籤指定了一個惟一ID,它將樣式應用於其子HTML5 畫布元素,如清單1所示。
清單1. 畫布定位樣式
CSS Code複製內容到剪貼板