TW201812613A - ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備 - Google Patents

３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備 Download PDF

Info

Publication number
TW201812613A
TW201812613A TW106123987A TW106123987A TW201812613A TW 201812613 A TW201812613 A TW 201812613A TW 106123987 A TW106123987 A TW 106123987A TW 106123987 A TW106123987 A TW 106123987A TW 201812613 A TW201812613 A TW 201812613A
Authority
TW
Taiwan
Prior art keywords
canvas
rendering
instruction
opengl
web page
Prior art date
Application number
TW106123987A
Other languages
English (en)
Inventor
黃剛
潘華
李�杰
胡吉嵩
Original Assignee
阿里巴巴集團服務有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 阿里巴巴集團服務有限公司 filed Critical 阿里巴巴集團服務有限公司
Publication of TW201812613A publication Critical patent/TW201812613A/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs

Abstract

本申請公開了一種3D canvas網頁元素的渲染方法、裝置及電子設備，以及一種2D canvas網頁元素的渲染方法、裝置及電子設備。其中，3D canvas網頁元素的渲染方法包括：截取對3D canvas網頁元素的WebGL繪圖指令；將WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據指令資訊，產生與WebGL繪圖指令對應的OpenGL繪圖指令；將OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成3D canvas網頁元素的渲染結果。採用本申請提供的方法，能夠避免使用系統Webview對3D canvas網頁元素渲染繪製，從而達到提高3D Canvas支持的相容性與覆蓋率的效果。

Description

3D canvas網頁元素的渲染方法、裝置及電子設備
本申請關於行動網際網路技術領域，具體關於一種3D canvas網頁元素的渲染方法、裝置及電子設備。本申請同時關於一種2D canvas網頁元素的渲染方法、裝置及電子設備。
隨著Web技術的發展和HTML5標準的誕生，HTML5開發越來越受歡迎。HTML5開發具有跨平臺、開發成本低、反覆運算快、易動態發佈等優點，在行動App開發中佔據的比重越來越大。Canvas元素作為HTML5的一個重要特性，在行動開發頁面展示中，特別是圖片處理、動畫展示等場合，起了不可或缺的作用。
在行動應用程式中，HTML5的3D canvas依靠系統Webview來完成渲染繪製，實現上依賴於系統Webview是否支援WebGL介面。WebGL是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，藉由增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器裡更流暢地 展示3D場景和模型了，還能創建複雜的導航和資料視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染外掛程式的麻煩，可被用於創建具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等。
然而，HTML5的3D canvas中的WebGL直到Android 5.0、iOS 8.0才被支持，並且支持的版本僅為WebGL 1.1，而非最新的WebGL 2.0。綜上所述，現有技術存在部分行動作業系統不支援WebGL渲染的問題。
本申請提供一種3D canvas網頁元素的渲染方法、裝置及電子設備，以解決現有技術下部分行動作業系統不支援WebGL渲染的問題。本申請還提供一種2D canvas網頁元素的渲染方法、裝置及電子設備。
本申請提供一種3D canvas網頁元素的渲染方法，包括：截取對3D canvas網頁元素的WebGL繪圖指令；將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結果。
可選的，所述截取對3D canvas網頁元素的WebGL繪 圖指令，採用如下方式：藉由所述3D canvas網頁元素的替換DOM物件，截取所述WebGL繪圖指令。
可選的，還包括：將所述3D canvas網頁元素的DOM物件替換為所述替換DOM物件。
可選的，在所述將所述3D canvas網頁元素的DOM物件替換為所述替換DOM物件之前，還包括：判斷所述作業系統是否允許執行DOM物件替換的操作；若是，則進入下一步驟；若否，則使用Webview視窗繪製所述3D canvas網頁元素。
可選的，所述將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，包括：從所述WebGL繪圖指令中萃取所述指令資訊；根據第一預設指令轉換規則和所述指令資訊，產生與所述WebGL繪圖指令對應的渲染命令；將所述渲染命令從傳送到所述系統框架層。
可選的，所述將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，採用如下方式：藉由JS bridge或者JavaScript引擎，將所述指令資訊傳送到所述系統框架層。
可選的，所述將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，採用如下方式：根據預設的時間間隔，將所述指令資訊傳送到所述系 統框架層。
可選的，所述產生與所述WebGL繪圖指令對應的OpenGL繪圖指令，包括：將所述指令資訊從所述系統框架層傳送到系統局部層；在所述系統局部層中，根據所述指令資訊產生所述OpenGL繪圖指令。
可選的，所述將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，包括：獲取所述3D canvas網頁元素對應的上下文資訊及渲染目標；根據所述上下文資訊和所述OpenGL繪圖指令，對所述渲染目標進行圖形渲染；將所述渲染目標輸入到系統的離螢幕緩衝區。
可選的，所述將所述渲染目標輸入到系統的離螢幕緩衝區，採用如下方式：藉由FBO技術，將多個所述渲染目標合成到所述離螢幕緩衝區；不同的所述渲染目標對應不同的所述3D canvas網頁元素。
可選的，在所述獲取所述3D canvas元素對應的上下文資訊及所述渲染目標之前，還包括：判斷所述上下文資訊及所述渲染目標是否存在；若否，則創建所述上下文資訊及所述渲染目標，以及對所述上下文資訊和所述渲染目標進行綁定。
可選的，還包括：對所述OpenGL渲染視窗和系統的Webview視窗進行合成，形成所述3D canvas網頁元素所在網頁的渲染結果。
可選的，所述對所述OpenGL渲染視窗和系統的Webview視窗進行合成，採用如下方式：藉由系統的視窗管理機制，將所述OpenGL渲染視窗和所述Webview視窗混合。
可選的，所述Webview視窗中繪製了所述網頁內的非3D canvas網頁元素。
可選的，所述系統包括Andriod系統或iOS系統。
對應的，本申請還提供一種3D canvas網頁元素的渲染裝置，包括：WebGL指令截取單元，用於截取對3D canvas網頁元素的WebGL繪圖指令；WebGL指令傳送單元，用於將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元，用於根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元，用於將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結果。
可選的，所述WebGL指令截取單元，具體用於藉由所述3D canvas網頁元素的替換DOM物件，截取所述WebGL繪圖指令。
可選的，所述WebGL指令傳送單元包括：指令資訊萃取子單元，用於從所述WebGL繪圖指令中萃取所述指令資訊；渲染命令產生子單元，用於根據第一預設指令轉換規則和所述指令資訊，產生與所述WebGL繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將所述渲染命令從傳送到所述系統框架層。
可選的，所述OpenGL指令產生單元包括：指令資訊傳送子單元，用於將所述指令資訊從所述系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在所述系統局部層中，根據所述指令資訊產生所述OpenGL繪圖指令。
對應的，本申請還提供一種電子設備，包括：顯示器；處理器；以及記憶體，用於儲存實現3D canvas網頁元素的渲染方法的程式，該設備通電並藉由所述處理器運行該3D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對3D canvas網頁元素的WebGL繪圖指令；將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結 果。
對應的，本申請還提供一種2D canvas網頁元素的渲染方法，包括：截取對2D canvas網頁元素的繪圖指令；將所述2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。
可選的，所述截取對2D canvas網頁元素的WebGL繪圖指令，採用如下方式：藉由所述2D canvas網頁元素的替換DOM物件，截取所述2D canvas網頁元素的繪圖指令。
可選的，所述將所述對2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層，包括：從所述2D canvas網頁元素的繪圖指令中萃取所述指令資訊；根據第一預設指令轉換規則和所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的渲染命令；將所述渲染命令從傳送到所述系統框架層。
可選的，所述產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令，包括：將所述指令資訊從所述系統框架層傳送到系統局部 層；在所述系統局部層中，根據將所述指令資訊產生所述OpenGL繪圖指令。
可選的，所述將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，包括：獲取所述2D canvas網頁元素對應的上下文資訊及渲染目標；根據所述上下文資訊和所述OpenGL繪圖指令，對所述渲染目標進行圖形渲染；將所述渲染目標輸入到系統的離螢幕緩衝區。
可選的，還包括：對所述OpenGL渲染視窗和系統的Webview視窗進行合成，形成所述2D canvas網頁元素所在網頁的渲染結果。
對應的，本申請還提供一種2D canvas網頁元素的渲染裝置，包括：指令截取單元，用於截取對2D canvas網頁元素的繪圖指令；指令傳送單元，用於將所述2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元，用於根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元，用於將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁 元素的渲染結果。
可選的，所述指令截取單元，具體用於藉由所述2D canvas網頁元素的替換DOM物件，截取所述2D canvas網頁元素的繪圖指令。
可選的，所述指令傳送單元包括：指令資訊萃取子單元，用於從所述2D canvas網頁元素的繪圖指令中萃取所述指令資訊；渲染命令產生子單元，用於根據第一預設指令轉換規則和所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將所述渲染命令從傳送到所述系統框架層。
可選的，所述OpenGL指令產生單元包括：指令資訊傳送子單元，用於將所述指令資訊從所述系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在所述系統局部層中，根據將所述指令資訊產生所述OpenGL繪圖指令。
對應的，本申請還提供一種電子設備，包括：顯示器；處理器；以及記憶體，用於儲存實現2D canvas網頁元素的渲染方法的程式，該設備通電並藉由所述處理器運行該2D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對2D canvas網頁元素的繪圖指令；將所述2D canvas網 頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。
與現有技術相比，本申請提供的方法，藉由截取對3D canvas網頁元素的WebGL繪圖指令；將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結果。
使用本申請提供的3D canvas網頁元素的渲染方法，將截取的針對3D canvas網頁元素的WebGL繪圖指令攜帶的指令資訊從使用者端指令碼層傳送到系統框架層，並根據指令資訊獲取與WebGL繪圖指令對應的OpenGL繪圖指令，再將OpenGL繪圖指令繪製到系統的OpenGL渲染視窗中，形成3D canvas網頁元素的渲染結果；這種處理方式，避免使用系統Webview對3D canvas網頁元素渲染繪製；因此，可以提高行動Web應用內HTML5 3D Canvas支援的相容性與覆蓋率，使得原先不支援WebGL或者支援WebGL不理想的行動設備中的應用均可使用WebGL進行動畫渲染。
本申請提供的3D canvas網頁元素的渲染方法，藉由引入JavaScript橋接層與系統框架層，充分解除了對於作 業系統的依賴，能夠相容現有發佈的行動作業系統，具有很強的相容性，從而可以達到跨平臺的技術效果。
101‧‧‧指令截取單元、顯示器
102‧‧‧處理器
103‧‧‧指令傳送單元、記憶體
105‧‧‧OpenGL指令產生單元
107‧‧‧OpenGL指令繪製單元
1101‧‧‧顯示器
1102‧‧‧處理器
1103‧‧‧記憶體
S101‧‧‧步驟
S103‧‧‧步驟
S105‧‧‧步驟
S107‧‧‧步驟
圖1是本申請提供的一種3D canvas網頁元素的渲染方法的實施例的流程圖；圖2是本申請提供的一種3D canvas網頁元素的渲染方法的實施例的結構示意圖；圖3是本申請提供的一種3D canvas網頁元素的渲染方法的實施例的具體流程圖；圖4是本申請提供的一種3D canvas網頁元素的渲染裝置的實施例的示意圖；圖5是本申請提供的一種電子設備的實施例的示意圖；圖6是本申請提供的一種2D canvas網頁元素的渲染方法的實施例的流程圖；圖7是本申請提供的一種2D canvas網頁元素的渲染方法的實施例的結構示意圖；圖8是本申請提供的一種2D canvas網頁元素的渲染方法的實施例的具體流程圖；圖9是本申請提供的一種2D canvas網頁元素的渲染裝置的實施例的示意圖；圖10是本申請提供的一種電子設備的實施例的示意圖。
在下面的描述中闡述了很多具體細節以便於充分理解本申請。但是，本申請能夠以很多不同於在此描述的其它方式來實施，本領域技術人員可以在不違背本申請內涵的情況下做類似推廣，因此本申請不受下面公開的具體實施的限制。
在本申請中，提供了一種3D canvas網頁元素的渲染方法、裝置及電子設備。在下面的實施例中逐一進行詳細說明。
本申請提供的3D canvas網頁元素的渲染方法，其核心的基本思想為：截取對3D canvas網頁元素的WebGL繪圖指令，並將截取的WebGL繪圖指令攜帶的指令資訊從使用者端指令碼層傳送到系統框架層，並根據指令資訊獲取與WebGL繪圖指令對應的OpenGL繪圖指令，再將OpenGL繪圖指令繪製到系統的OpenGL渲染視窗中，形成3D canvas網頁元素的渲染結果。由於能夠避免使用系統Webview對3D canvas網頁元素進行渲染繪製，因而，可以提高行動Web應用內HTML5 3D Canvas支援的相容性與覆蓋率。
請參考圖1，其為本申請的3D canvas網頁元素的渲染方法實施例的流程圖。所述方法包括如下步驟： 步驟S101：截取對3D canvas網頁元素的WebGL繪圖指令。
canvas標籤是在HTML5中出現的，最先開始支援的是2D圖形繪製，現在又開始有了基於WebGL的3D繪製。canvas元素是一個矩形區域，可以控制其中的每一圖元。canvas元素本身是沒有繪圖能力的，所有的繪製工作必須在JavaScript內部完成，即：canvas元素使用JavaScript在網頁上繪製圖像。
WebGL是一套基於OpenGL ES 2.0的3d圖形API，能夠允許在網頁中使用類似於OpenGL的WebGL實現3D渲染。WebGL完美地解決了現有的Web互動式三維動畫的兩個問題：第一，它藉由HTML腳本本身實現Web互動式三維動畫的製作，無需任何瀏覽器外掛程式支持；第二，它利用底層的圖形硬體加速功能進行的圖形渲染，是藉由統一的、標準的、跨平臺的OpenGL介面實現的。
WebGL的圖形API是藉由HTML 5的3D canvas標籤來使用的。本申請將JavaScript代碼中對3D canvas網頁元素的繪圖操作指令，稱為WebGL繪圖指令。
例如，一個canvas元素的代碼為<canvas id="myCanvas" width="200" height="100"></canvas>，該元素包括id屬性、寬度屬性和高度屬性；對該元素的JavaScript繪圖代碼可如下所示：
由上述代碼可見，JavaScript使用id來尋找canvas元素，然後，創建context物件，getContext("3d")物件是內建的HTML5物件，擁有多種繪製3D圖形的方法；其中，cxt.fillRect(0,0,150,75)指令即為一條WebGL繪圖指令；藉由上述代碼，可在canvas元素中繪製一個紅色的矩形。
在系統預設的情況下，是藉由系統的Webview視窗繪製所述3D canvas網頁元素的；而本申請提供的方法將截取對3D canvas網頁元素的WebGL繪圖指令，將所述3D canvas網頁元素繪製在系統的OpenGL渲染視窗中。
本申請提供的方法對WebGL繪圖指令的截取方式不加以限制，可使用任意一種技術截取對3D canvas網頁元素的WebGL繪圖指令。
作為一種可選的方案，本步驟可採用如下方式實現：藉由所述3D canvas網頁元素的替換DOM物件，截取所述WebGL繪圖指令。
所述3D canvas網頁元素所在網頁的DOM(Document Object Model，文檔物件模型)包括所述3D canvas網頁元 素對應的DOM物件，可藉由JavaScript(以及其他程式設計語言)對DOM進行訪問。
所述替換DOM物件是指，所述3D canvas網頁元素的DOM物件的替換物件。要藉由所述替換DOM物件截取所述WebGL繪圖指令，首先需要將所述3D canvas網頁元素所在網頁的DOM樹中所述3D canvas網頁元素的DOM物件替換為所述替換DOM物件。
具體實施時，可首先藉由getElementById(id)方法獲取3D canvas網頁元素，然後，再藉由appendChild(node)方法插入所述3D canvas網頁元素的替換DOM物件，該替換DOM物件可以為一個自訂的子節點，最後，再藉由removeChild(node)方法刪除3D canvas網頁元素。經過上述處理後，對於該3D canvas網頁元素的WebGL繪圖指令，即可藉由替換DOM對象截取。
作為一種可選的方案，在所述將所述3D canvas網頁元素的DOM物件替換為所述替換DOM物件之前，還包括：判斷所述作業系統是否允許執行DOM物件替換的操作的步驟；如果判斷結果為是，則執行所述將所述3D canvas網頁元素的DOM物件替換為所述替換DOM物件的步驟；否則，則使用Webview視窗繪製所述3D canvas網頁元素。
採用這種判斷處理的方式，如果為了保證作業系統的安全性，預先做了不允許進行DOM物件替換的設置處理，則可以藉由系統預設的Webview視窗繪製所述3D canvas網 頁元素，從而提高了使用者體驗。
在截取到對3D canvas網頁元素的WebGL繪圖指令之後，就可以進入下一步驟，將截取的WebGL繪圖指令攜帶的指令資訊從使用者端指令碼層傳送到系統框架層。
步驟S103：將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層。
所述WebGL繪圖指令攜帶的指令資訊，包括但不限於：指令名稱及指令參數，例如，drawCircle(200,300,5)這個WebGL繪圖指令所攜帶的指令名稱為drawCircle，指令參數為：x座標為200、y座標為300，半徑為5。
本步驟S103可採用直接傳遞所述指令資訊的形式，將所述WebGL繪圖指令攜帶的指令資訊從使用者端指令碼層傳送到系統框架層，也可以採用下述較佳的方案作為具體實施方案。
作為一種較佳的方案，本步驟S103可包括如下具體步驟：1)從所述WebGL繪圖指令中萃取所述指令資訊；2)根據第一預設指令轉換規則和所述指令資訊，產生與所述WebGL繪圖指令對應的渲染命令；3)將所述渲染命令傳送到所述系統框架層。
藉由上述第2個步驟，可根據第一預設指令轉換規則對各種指令資訊進行拼接形成預設形式的渲染命令(即：指令資訊的規範化表達形式)，再藉由上述第3個步驟以渲染命令形式將指令資訊從使用者端指令碼層傳送到系統框架層；這種處理方式，可以使得後續環節易於對該命令 進行解析，進而獲得與WebGL繪圖指令對應的OpenGL繪圖指令。
本實施例中，設置了一個GCanvas類，該類包括與上述第2個步驟對應的指令轉換程式碼如下所示：
例如，WebGL的繪圖指令為：WebGLRenderingContext.uniform4f(location,x,y,z,w)，經過上述代碼處理後該指令轉換為渲染命令(命令串)：“17，3，100，200，300，400；”；其中，“17”指代uniform4f方法在GCanvas中的指令ID，“3”指代location物件的ID，“100，200，300”代表位置“x,y,z”,“400”代表寬度“w”，逗號“，”在GCanvas中是變數分隔符號，分號“；”在GCanvas中表示命令結束符。
需要說明的是，本步驟S103及上一步驟S101均運行在使用者端指令碼層。所述使用者端指令碼層可包括如下功能：1)查找HTML5頁面中是否有可供替換的3D canvas元素，如有且能成功替換，則新建一個替換DOM物件將之插入原DOM樹，並將原3D canvas元素刪除，後續所有對於原3D canvas元素的調用、操作都將被新插入的DOM物件託管；2)截取對原3D canvas網頁元素的WebGL繪圖指令，並將該繪圖指令攜帶的指令資訊從使用者端指令碼層 傳送到系統框架層。此外，所述使用者端指令碼層還用於回應使用者對網頁元素的交互指令、回應回呼函數、計算canvas網頁元素的大小與位置、及多個canvas網頁元素的層管理等。
所述系統框架層是指，使用作業系統原生語言開發程式的應用程式框架層，例如，當本申請的方法應用在Android系統中時，系統框架層即為Java語言開發的程式層；當本申請的方法應用在iOS系統中時，系統框架層即為Object-C語言開發的程式層。
具體實施時，可藉由即時的方式將所述指令資訊從使用者端指令碼層傳送到系統框架層。然而，由於這種方式需要對截取的每一條指令進行系統框架層的渲染處理，因此，這種處理方法存在降低系統性能的問題。
為了避免對系統性能產生負面影響，作為一種較佳的方案，本步驟可採用如下方式實現：根據預設的時間間隔，將所述指令資訊從使用者端指令碼層傳送到所述系統框架層。這樣，既可以保證一定的圖像幀率，從而滿足使用者的視覺體驗，又可以避免降低系統性能。
此外，為了能夠將所述指令資訊從使用者端指令碼層傳送到系統框架層，可採用如下技術實現：藉由JS bridge或者JavaScript引擎，將所述指令資訊傳送到所述系統框架層。
藉由所述JS bridge或者JavaScript引擎，可以實現JavaScript代碼與系統框架層代碼的交互，從而將指令資 訊從使用者端指令碼層傳送到系統框架層。
如果採用JS bridge方法傳遞資訊，可應用cordova等較為成熟的方案。如果採用JavaScript引擎方法傳遞資訊，則當本申請的方法應用在Android系統中時，可採用V8引擎；當本申請的方法應用在iOS系統中時，可採用JavaScriptCore引擎。
需要注意的是，如果使用了JS bridge的方案，那麼針對所選取的JS bridge，還需要在所述系統框架層中實現JS bridge的適配外掛程式，該適配外掛程式用以接收由JS bridge傳遞給系統框架層的交互指令或渲染指令(即：指令資訊)，並且根據需要進行處理或者轉發。
需要說明的是，本申請提供的方法，藉由引入JavaScript橋接層與系統框架層，充分解除了對於作業系統的依賴，能夠相容現有發佈的行動作業系統，具有很強的相容性，從而可以達到跨平臺的技術效果。
當所述WebGL繪圖指令攜帶的指令資訊被傳送到系統框架層後，就可以進入下一步驟，根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令。
步驟S105：根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令。
本步驟根據接收到的所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令。藉由本步驟及上述步驟的處理，能夠將原始的WebGL繪圖指令最終轉換為對應的OpenGL繪圖指令。
需要說明的是，本步驟及下一步驟可直接在系統框架層實施，例如，Android系統框架層為應用程式的開發提供了兩個類來實現對3D圖形API OpenGL ES的支援，分別是GLSurfaceView和GLSurfaceView.Renderer；藉由這兩個介面類別，就可以基於OpenGL ES來進行3D圖形的開發了。然而，這種實施方式存在渲染效率較低的問題。
作為一種較佳的方案，本步驟及下一步驟可在系統局部層(如：Android系統的NDK，Native Development Kit)實施。所述系統局部層又稱為C++引擎層。該方式和上述方式類似，以Android系統為例，該方式與上述方式的不同之處主要為：將GLSurfaceView.Renderer的實現部分放到局部來實現，然後藉由JNI來實現Java端和C端的通信。
在本實施例中，本步驟及下一步驟在系統局部層實施。為此，本步驟首先要將所述指令資訊從所述系統框架層傳送到系統局部層，然後，在系統局部層中，根據所述指令資訊產生所述OpenGL繪圖指令。藉由在系統局部層產生並執行所述OpenGL繪圖指令，可獲得較高的渲染性能。
具體實施時，本步驟S105可採用如下方式實現：根據第二預設指令轉換規則和所述指令資訊，產生所述OpenGL繪圖指令。
所述第二預設指令轉換規則與上述第一預設指令轉換規則相關，根據所述第一預設指令轉換規則，將WebGL繪 圖指令轉換為渲染命令；根據所述第二預設指令，將渲染命令形式的指令資訊轉換為與WebGL繪圖指令對應的OpenGL繪圖指令。
例如，在使用者端指令碼層將所述WebGL繪圖指令轉換為渲染命令“B，1”，在經過系統框架層傳遞到系統局部層(C++引擎層)後，會被如下代碼處理：
藉由上述代碼處理後，“1”被轉化為枚舉值“kEJCompositeOperationSourceOver”，然後，在SetGlobalCompositeOperation方法中繼續處理，該方法代碼如下所示：
經過上述代碼解析出“glBlendFunc”，該指令為WebGL繪圖指令真正對應的OpenGL的繪圖指令。
產生與所述WebGL繪圖指令對應的OpenGL繪圖指令後，就可以進入下一步驟，根據這些OpenGL繪圖指令繪製所述3D canvas網頁元素。
步驟S107：將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結果。
本步驟將上一步驟產生的所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗中，以形成所述3D canvas網頁元素的渲染結果。
將OpenGL繪圖指令繪製到系統的OpenGL渲染視窗為本技術領域的公職技術，本申請對具體繪製方式不加以限制。下面給出一種可選的具體實施方法。
具體實施時，本步驟可包括如下步驟：1)獲取所述3D canvas網頁元素對應的上下文資訊及渲染目標；2)根據所述上下文資訊和所述OpenGL繪圖指令，對所述渲染 目標進行圖形渲染；3)將所述渲染目標輸入到系統的離螢幕緩衝區。
1)獲取所述3D canvas網頁元素對應的上下文資訊及渲染目標。
要實現將OpenGL繪圖指令繪製到系統的OpenGL渲染視窗的處理，需要系統局部層具有如下功能：1)創建、管理、銷毀3D canvas實體(entity)與3D canvas的上下文實體(context entity)，其中，上下文實體中保存有canvas元素的上下文資訊，canvas實體保存有canvas元素的屬性資訊；2)負責管理將不同的canvas元素渲染到多個渲染層(render layer)的渲染目標(render target)中；3)將多個渲染目標藉由OpenGL中的FBO技術合成到離螢幕渲染緩衝區。
簡單來說，渲染目標是一個表面，圖形API可以往上面“畫”東西，實質上，渲染目標是一個連續的記憶體區域，這樣的記憶體區域可以同時的存在多個，也就是多個渲染目標。在本實施例中，不同的3D canvas網頁元素對應不同的渲染目標。
所述上下文資訊及所述渲染目標是在第一次繪製3D canvas網頁元素時產生的，因此，在所述獲取所述3D canvas元素對應的上下文資訊及所述渲染目標之前，還包括：判斷所述上下文資訊及所述渲染目標是否存在；如果不存在，則需要創建所述上下文資訊及所述渲染目標，以及對所述上下文資訊和所述渲染目標進行綁定。藉由將新 創建的所述上下文資訊和所述渲染目標綁定，使得3D canvas元素、上下文資訊及渲染目標三者相關聯。
2)根據所述上下文資訊和所述OpenGL繪圖指令，對所述渲染目標進行圖形渲染。
獲取到3D canvas網頁元素對應的上下文資訊及渲染目標後，本步驟根據上下文資訊和步驟S105產生的OpenGL繪圖指令，對所述渲染目標進行圖形渲染，以形成所述3D canvas網頁元素的渲染結果。
具體實施時，由canvas上下文實體根據產生的OpenGL繪圖指令調用渲染器(renderer)對應的API，渲染器調用對應的OpenGL ES API並將結果渲染至渲染目標中。
3)將所述渲染目標輸入到系統的離螢幕緩衝區。
OpenGL中，GPU螢幕渲染有以下兩種方式：1)當前螢幕渲染(On-Screen Rendering)；2)離螢幕渲染(Off-Screen Rendering)。其中，當前螢幕渲染是指，GPU在當前用於顯示的螢幕緩衝區中進行渲染操作；離螢幕渲染是指，GPU在當前螢幕緩衝區以外新開闢一個緩衝區進行渲染操作。
由於所述3D canvas網頁元素的渲染結果最終需要融合到系統Webview視窗，因此，本步驟採用離螢幕渲染方式，將渲染後的渲染目標輸入到系統的離螢幕緩衝區。
需要注意的是，如果所述3D canvas網頁元素所在的網頁包括多個3D canvas網頁元素，則所述將所述渲染目標輸入到系統的離螢幕緩衝區，可採用如下方式：藉由 FBO(Frame Buffer Object)技術，將多個所述渲染目標合成到所述離螢幕緩衝區；這種情況下，不同的所述渲染目標對應不同的所述3D canvas網頁元素，離螢幕緩衝區包括將多個3D canvas網頁元素的渲染效果融合在一起的合成渲染效果資料。
上述第1、2和3步驟在本實施例中的具體實現如下所述：對於3D canvas網頁元素的canvas與對應webgl context，GCanvas內部會創建對應的兩個類“GCanvas”與“GCanvasContext”與之對應；根據上下文資訊，利用FBO技術，會將對應的圖形繪製到FBO指定的紋理(texture)上，最終由系統的EGL的swap buffer機制渲染到螢幕。
藉由上述第1、2和3步驟將3D canvas網頁元素的渲染效果輸入到系統的離螢幕緩衝區後，具體實施時，還需要將離螢幕緩衝區的資料複製到系統框架層的OpenGL渲染視窗(如：Android系統的GlSurfaceView)中，以便系統框架層對所述OpenGL渲染視窗和系統的Webview視窗進行合成，形成所述3D canvas網頁元素所在網頁的整體渲染效果。
具體實施時，可藉由系統的視窗管理機制，將所述OpenGL渲染視窗和所述Webview視窗混合。其中，所述Webview視窗中繪製了所述網頁內的非3D canvas網頁元素。
在本實施例中，藉由HybridViewController類(繼承自ViewController)，將WebView與GCanvasView(繼承自 GLSurfaceView)加入到原元素的ViewGroup中，部分源碼如下：
綜上所述，傳統方法使用WebView對3D canvas網頁元素進行渲染，而本申請提供的方法首先將3D canvas網頁元素的動畫內容渲染在系統的OpenGL渲染視窗中，然後，再將OpenGL渲染視窗和WebView視窗融合，形成網頁的整體渲染效果。
請參考圖2，其為本申請的3D canvas網頁元素的渲染方法實施例的結構示意圖。在本實施例中，實現本申請的3D canvas網頁元素的渲染方法有四層結構，分別為：JavaScript託管模組層、橋接模組層、作業系統適配模組 層、引擎模組層。下面對這些層次分別作簡要說明。
1)JavaScript託管模組層：主要用於託管HTML5 3D canvas的API(WebGL繪圖指令)和針對這些API實現本方案，本層的功能包括但不限於：canvas元素替換、渲染指令拼接與傳遞、交互指令回應、回呼函數的回應、canvas元素大小與位置的計算、多個canvas的層管理等。
2)橋接模組層：主要用於JavaScript與作業系統層(即：上述系統框架層)代碼(android：Java/iOS：OC)進行交互，有兩種可以實現JavaScript與底層代碼交互的方案，分別為：JS bridge、JS引擎。
3)作業系統適配模組層：主要用於實現自訂的渲染視窗(即：上述OpenGL渲染視窗)，該自訂的渲染視窗用於展現HTML5 3D canvas的渲染輸出結果；以及，管理多個視窗用(自訂的渲染視窗與其他HTML5元素的渲染視窗)，以合成最終的渲染結果。如果在上一層(橋接模組層)中使用了JS bridge的方案，那麼針對所選取的JS bridge，還需要實現JS bridge的適配外掛程式用以接收由JS bridge傳遞給系統層的交互或渲染指令，並且按照需要進行處理或者轉發。
4)引擎模組層：即上述系統局部層，主要用以創建、管理、銷毀canvas實體(entity)與canvas 3d的上下文實體(context entity)，根據接收到的渲染指令，調用對應的OpenGL ES API。在此層中還負責管理針對不同的canvas渲染到多個渲染層(render layer)的渲染目標(render target)中，最後將多個渲染目標藉由OpenGL中的FBO技術合成到離螢幕渲染緩衝區。
請參考圖3，其為本申請的3D canvas網頁元素的渲染方法實施例的具體流程圖。圖3所示的流程圖對應上述方案的具體處理過程，結合圖3能夠更直觀的理解上述方案的處理過程。下面結合圖2對圖3所示的具體流程圖作簡要說明。
1)JavaScript託管模組層
查找HTML5頁面中是否有可供替換的3D canvas元素，如有且能成功替換，則新建一個自訂的DOM元素將之插入原DOM樹，並將原canvas元素刪除，後續所有對於原canvas元素的調用、操作都將被新插入的DOM元素託管。在接收到3D canvas的調用後，將該API調用轉化為內部實現的一套命令，並藉由計時器進行傳入系統適配層。
2)橋接模組層
負責將JavaScript託管模組層產生的命令傳給系統適配層。
3)作業系統適配模組層
接收到命令後，拼裝用於渲染3D canvas的視圖與其他HTML5元素的視圖，並將命令傳給引擎模組層。
4)引擎模組層
接收到命令後，進行解析，獲取對應的3D canvas上下文(如若沒有則新建)；合成器獲取一個渲染目標(如果沒有則新建)並且分配給3D canvas上下文；由3D canvas上下文根據解析的命令結果調用渲染器(renderer)對應的API，渲染器調用對應的OpenGL ES API並將結果渲染至渲染目標中；合成器將多個渲染目標藉由FBO的技術進行合成並且輸入到系統的離螢幕緩衝區。
此時，本申請提供的3D canvas網頁元素的渲染方法的主要工作均完成，作業系統將獲得渲染控制權，並將渲染結果展示到螢幕上。
在上述的實施例中，提供了一種3D canvas網頁元素的渲染方法，與之相對應的，本申請還提供一種3D canvas網頁元素的渲染裝置。該裝置是與上述方法的實施例相對應。
請參看圖4，其為本申請的3D canvas網頁元素的渲染裝置實施例的示意圖。由於裝置實施例基本相似於方法實施例，所以描述得比較簡單，相關之處參見方法實施例的部分說明即可。下述描述的裝置實施例僅僅是示意性的。
本實施例的一種3D canvas網頁元素的渲染裝置，包括：WebGL指令截取單元101，用於截取對3D canvas網頁元素的WebGL繪圖指令；WebGL指令傳送單元103，用於將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元105，用於根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元107，用於將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁 元素的渲染結果。
可選的，所述WebGL指令截取單元101，具體用於藉由所述3D canvas網頁元素的替換DOM物件，截取所述WebGL繪圖指令。
可選的，所述WebGL指令傳送單元103包括：指令資訊萃取子單元，用於從所述WebGL繪圖指令中萃取所述指令資訊；渲染命令產生子單元，用於根據第一預設指令轉換規則和所述指令資訊，產生與所述WebGL繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將所述渲染命令從傳送到所述系統框架層。
可選的，所述OpenGL指令產生單元105包括：指令資訊傳送子單元，用於將所述指令資訊從所述系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在所述系統局部層中，根據所述指令資訊產生所述OpenGL繪圖指令。
請參考圖5，其為本申請的電子設備實施例的示意圖。由於設備實施例基本相似於方法實施例，所以描述得比較簡單，相關之處參見方法實施例的部分說明即可。下述描述的設備實施例僅僅是示意性的。
本實施例的一種電子設備，該電子設備包括：顯示器101；處理器102；以及記憶體103，用於儲存實現3D canvas網頁元素的渲染方法的程式，該設備通電並藉由所 述處理器運行該3D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對3D canvas網頁元素的WebGL繪圖指令；將所述WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述WebGL繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述3D canvas網頁元素的渲染結果。
與上述的方法相對應，本申請還提供一種2D canvas網頁元素的渲染方法。下面首先對現有技術下的2D canvas網頁元素的渲染方法及存在的問題作簡要說明。
現有技術下，HTML5 2D canvas在行動App中，依靠系統Webview來完成渲染繪製，性能上依賴於系統Webview。然而，HTML5的canvas元素在行動端的性能並不好，特別是在一些遊戲、動畫等高交互的頁面上，canvas的性能問題更為明顯，畫面會出現卡頓、回應慢的現象。其中，由於Android手機的Android系統版本眾多，各家手機廠商支援不一，定制化嚴重，HTML5 canvas性能瓶頸在Android手機上尤為突出。綜上所述，現有技術存在2D canvas網頁元素渲染性能低的問題。
請參考圖6，其為本申請提供的一種2D canvas網頁元素的渲染方法實施例的流程圖，本實施例與第一實施例內容相同的部分不再贅述，請參見實施例一中的對應部分。本申請提供的一種2D canvas網頁元素的渲染方法包括：步驟S101：截取對2D canvas網頁元素的繪圖指令。
本步驟與上述實施例一的步驟S101相對應，兩者不同之處在於：上述實施例一的處理物件為3D canvas網頁元素，而本方法的處理物件為2D canvas網頁元素；對應的，上述實施例一截取WebGL繪圖指令，而本方法截取對2D canvas的繪圖指令。
本申請提供的2D canvas網頁元素的渲染方法與上述3D canvas網頁元素的渲染方法的核心思想及處理步驟完全一致，因此，本實施例不再對各個步驟做具體說明，對應部分請參見實施例一中的相關描述，此處不再贅述。下述描述的方法實施例僅僅是示意性的。
作為一種較佳的方案，本步驟可採用如下方式：藉由所述2D canvas網頁元素的替換DOM物件，截取所述2D canvas網頁元素的繪圖指令。
步驟S103：將所述2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層。
作為一種較佳的方案，本步驟可包括如下具體步驟：1)從所述2D canvas網頁元素的繪圖指令中萃取所述指令資訊；2)根據第一預設指令轉換規則和所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的渲染命令；3)將所述渲染命令從傳送到所述系統框架層。
步驟S105：根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令。
作為一種較佳的方案，本步驟可包括如下具體步驟：1)將所述指令資訊從所述系統框架層傳送到系統局部 層；2)在所述系統局部層中，根據將所述指令資訊產生所述OpenGL繪圖指令。
步驟S107：將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。
作為一種較佳的方案，本步驟可包括如下具體步驟：1)獲取所述2D canvas網頁元素對應的上下文資訊及渲染目標；2)根據所述上下文資訊和所述OpenGL繪圖指令，對所述渲染目標進行圖形渲染；3)將所述渲染目標輸入到系統的離螢幕緩衝區。
此外，本申請提供的方法還包括：對所述OpenGL渲染視窗和系統的Webview視窗進行合成，形成所述2D canvas網頁元素所在網頁的渲染結果。
請參考圖7，其為本申請的2D canvas網頁元素的渲染方法實施例的結構示意圖。在本實施例中，實現本申請的2D canvas網頁元素的渲染方法有四層結構，分別為：JavaScript託管模組層、橋接模組層、作業系統適配模組層、引擎模組層。下面對這些層次分別作簡要說明。
1)JavaScript託管模組層：主要用於託管HTML5 2D canvas的API(繪圖指令)和針對這些API實現本方案，本層的功能包括但不限於：canvas元素替換、渲染指令拼接與傳遞、交互指令回應、回呼函數的回應、canvas元素大小與位置的計算、多個canvas的層管理等。
2)橋接模組層：主要用於JavaScript與作業系統層 (即：上述系統框架層)代碼(android：Java/iOS：OC)進行交互，有兩種可以實現JavaScript與底層代碼交互的方案，分別為：JS bridge、JS引擎。
3)作業系統適配模組層：主要用於實現自訂的渲染視窗(即：上述OpenGL渲染視窗)，該自訂的渲染視窗用於展現HTML5 2D canvas的渲染輸出結果；以及，管理多個視窗用(自訂的渲染視窗與其他HTML5元素的渲染視窗)，以合成最終的渲染結果。如果在上一層(橋接模組層)中使用了JS bridge的方案，那麼針對所選取的JS bridge，還需要實現JS bridge的適配外掛程式用以接收由JS bridge傳遞給系統層的交互或渲染指令，並且按照需要進行處理或者轉發。
4)引擎模組層：即上述系統局部層，主要用以創建、管理、銷毀canvas實體(entity)與canvas 2d的上下文實體(context entity)，根據接收到的渲染指令，調用對應的OpenGL ES API。在此層中還負責管理針對不同的canvas渲染到多個渲染層(render layer)的渲染目標(render target)中，最後將多個渲染目標藉由OpenGL中的FBO技術合成到離螢幕渲染緩衝區。
請參考圖8，其為本申請的2D canvas網頁元素的渲染方法實施例的具體流程圖。圖8所示的流程圖對應上述方案的具體處理過程，結合圖8能夠更直觀的理解上述方案的處理過程。下面結合圖7對圖8所示的具體流程圖作簡要說明。
1)JavaScript託管模組層
查找HTML5頁面中是否有可供替換的2D canvas元素，如有且能成功替換，則新建一個自訂的DOM元素將之插入原DOM樹，並將原canvas元素刪除，後續所有對於原canvas元素的調用、操作都將被新插入的DOM元素託管。在接收到2D canvas的調用後，將該API調用轉化為內部實現的一套命令，並藉由計時器進行傳入系統適配層。
2)橋接模組層
負責將JavaScript託管模組層產生的命令傳給系統適配層。
3)作業系統適配模組層
接收到命令後，拼裝用於渲染2D canvas的視圖與其他HTML5元素的視圖，並將命令傳給引擎模組層。
4)引擎模組層
接收到命令後，進行解析，獲取對應的2D canvas上下文(如若沒有則新建)；合成器獲取一個渲染目標(如果沒有則新建)並且分配給2D canvas上下文；由2D canvas上下文根據解析的命令結果調用渲染器(renderer)對應的API，渲染器調用對應的OpenGL ES API並將結果渲染至渲染目標中；合成器將多個渲染目標藉由FBO的技術進行合成並且輸入到系統的離螢幕緩衝區。
此時，本申請提供的2D canvas網頁元素的渲染方法的主要工作均完成，作業系統將獲得渲染控制權，並將渲 染結果展示到螢幕上。
在上述的實施例中，提供了一種2D canvas網頁元素的渲染方法，與之相對應的，本申請還提供一種2D canvas網頁元素的渲染裝置。該裝置是與上述方法的實施例相對應。
請參看圖9，其為本申請的2D canvas網頁元素的渲染裝置實施例的示意圖。由於裝置實施例基本相似於方法實施例，所以描述得比較簡單，相關之處參見方法實施例的部分說明即可。下述描述的裝置實施例僅僅是示意性的。
本實施例的一種2D canvas網頁元素的渲染裝置，包括：指令截取單元101，用於截取對2D canvas網頁元素的繪圖指令；指令傳送單元103，用於將所述2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元105，用於根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元107，用於將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。
可選的，所述指令截取單元101，具體用於藉由所述2D canvas網頁元素的替換DOM物件，截取所述2D canvas網頁元素的繪圖指令。
可選的，所述指令傳送單元103包括：指令資訊萃取子單元，用於從所述2D canvas網頁元素的繪圖指令中萃取所述指令資訊； 渲染命令產生子單元，用於根據第一預設指令轉換規則和所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將所述渲染命令從傳送到所述系統框架層。
可選的，所述OpenGL指令產生單元105包括：指令資訊傳送子單元，用於將所述指令資訊從所述系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在所述系統局部層中，根據將所述指令資訊產生所述OpenGL繪圖指令。
請參考圖10，其為本申請的電子設備實施例的示意圖。由於設備實施例基本相似於方法實施例，所以描述得比較簡單，相關之處參見方法實施例的部分說明即可。下述描述的設備實施例僅僅是示意性的。
本實施例的一種電子設備，該電子設備包括：顯示器1101；處理器1102；以及記憶體1103，用於儲存實現2D canvas網頁元素的渲染方法的程式，該設備通電並藉由所述處理器運行該2D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對2D canvas網頁元素的繪圖指令；將所述2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；根據所述指令資訊，產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。
本申請提供的2D canvas網頁元素的渲染方法、裝置及電子設備，藉由在行動App層面上截取對2D canvas網頁元素的繪圖指令，將2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層，再根據所述指令資訊產生與所述2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；並將所述OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成所述2D canvas網頁元素的渲染結果。採用本申請提供的方法，能夠避免藉由系統Webview對2D canvas網頁元素進行渲染繪製，從而達到提高渲染性能的效果。
本申請雖然以較佳實施例公開如上，但其並不是用來限定本申請，任何本領域技術人員在不脫離本申請的精神和範圍內，都可以做出可能的變動和修改，因此本申請的保護範圍應當以本申請申請專利範圍第所界定的範圍為準。
在一個典型的配置中，計算設備包括一個或多個處理器(CPU)、輸入/輸出介面、網路介面和記憶體。
記憶體可能包括電腦可讀媒體中的非永久性記憶體，隨機存取記憶體(RAM)和/或非揮發性記憶體等形式，如唯讀記憶體(ROM)或快閃記憶體(flash RAM)。記憶體是電腦可讀媒體的示例。
1、電腦可讀媒體包括永久性和非永久性、可行動和非可行動媒體可以由任何方法或技術來實現資訊儲存。資訊可以是電腦可讀指令、資料結構、程式的模組或其他 資料。電腦的儲存媒體的例子包括，但不限於相變記憶體(PRAM)、靜態隨機存取記憶體(SRAM)、動態隨機存取記憶體(DRAM)、其他類型的隨機存取記憶體(RAM)、唯讀記憶體(ROM)、電可抹除可程式設計唯讀記憶體(EEPROM)、快閃記憶體或其他記憶體技術、唯讀光碟唯讀記憶體(CD-ROM)、數位多功能光碟(DVD)或其他光學儲存、磁盒式磁帶，磁帶磁磁片儲存或其他磁性存放裝置或任何其他非傳輸媒體，可用於儲存可以被計算設備訪問的資訊。按照本文中的界定，電腦可讀媒體不包括非暫態電腦可讀媒體(transitory media)，如調變的資料信號和載波。
2、本領域技術人員應明白，本申請的實施例可提供為方法、系統或電腦程式產品。因此，本申請可採用完全硬體實施例、完全軟體實施例或結合軟體和硬體方面的實施例的形式。而且，本申請可採用在一個或多個其中包含有電腦可用程式碼的電腦可用儲存媒體(包括但不限於磁碟記憶體、CD-ROM、光學記憶體等)上實施的電腦程式產品的形式。

Claims (31)

  1. 一種3D canvas網頁元素的渲染方法，其特徵在於，包括：截取對3D canvas網頁元素的WebGL繪圖指令；將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據該指令資訊，產生與該WebGL繪圖指令對應的OpenGL繪圖指令；將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該3D canvas網頁元素的渲染結果。
  2. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，該截取對3D canvas網頁元素的WebGL繪圖指令，採用如下方式：藉由該3D canvas網頁元素的替換DOM物件，截取該WebGL繪圖指令。
  3. 根據申請專利範圍第2項之3D canvas網頁元素的渲染方法，其中，還包括：將該3D canvas網頁元素的DOM物件替換為該替換DOM物件。
  4. 根據申請專利範圍第3項之3D canvas網頁元素的渲染 方法，其中，在該將該3D canvas網頁元素的DOM物件替換為該替換DOM物件之前，還包括：判斷該作業系統是否允許執行DOM物件替換的操作；若是，則進入下一步驟；若否，則使用Webview視窗繪製該3D canvas網頁元素。
  5. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，該將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，包括：從該WebGL繪圖指令中萃取該指令資訊；根據第一預設指令轉換規則和該指令資訊，產生與該WebGL繪圖指令對應的渲染命令；將該渲染命令從傳送到該系統框架層。
  6. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，該將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，採用如下方式：藉由JS bridge或者JavaScript引擎，將該指令資訊傳送到該系統框架層。
  7. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，該將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層，採用如下方式：根據預設的時間間隔，將該指令資訊傳送到該系統框 架層。
  8. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，該產生與該WebGL繪圖指令對應的OpenGL繪圖指令，包括：將該指令資訊從該系統框架層傳送到系統局部層；在該系統局部層中，根據該指令資訊產生該OpenGL繪圖指令。
  9. 根據申請專利範圍第8項之3D canvas網頁元素的渲染方法，其中，該將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，包括：獲取該3D canvas網頁元素對應的上下文資訊及渲染目標；根據該上下文資訊和該OpenGL繪圖指令，對該渲染目標進行圖形渲染；將該渲染目標輸入到系統的離螢幕緩衝區。
  10. 根據申請專利範圍第9項之3D canvas網頁元素的渲染方法，其中，該將該渲染目標輸入到系統的離螢幕緩衝區，採用如下方式：藉由FBO技術，將多個該渲染目標合成到該離螢幕緩衝區；不同的該渲染目標對應不同的該3D canvas網頁元素。
  11. 根據申請專利範圍第9項之3D canvas網頁元素的渲染方法，其中，在該獲取該3D canvas元素對應的上下文資訊及該渲染目標之前，還包括：判斷該上下文資訊及該渲染目標是否存在；若否，則創建該上下文資訊及該渲染目標，以及對該上下文資訊和該渲染目標進行綁定。
  12. 根據申請專利範圍第1項之3D canvas網頁元素的渲染方法，其中，還包括：對該OpenGL渲染視窗和系統的Webview視窗進行合成，形成該3D canvas網頁元素所在網頁的渲染結果。
  13. 根據申請專利範圍第12項之3D canvas網頁元素的渲染方法，其中，該對該OpenGL渲染視窗和系統的Webview視窗進行合成，採用如下方式：藉由系統的視窗管理機制，將該OpenGL渲染視窗和該Webview視窗混合。
  14. 根據申請專利範圍第12項之3D canvas網頁元素的渲染方法，其中，該Webview視窗中繪製了該網頁內的非3D canvas網頁元素。
  15. 根據申請專利範圍第1項之3D canvas網頁元素的渲染 方法，其中，該系統包括Andriod系統或iOS系統。
  16. 一種3D canvas網頁元素的渲染裝置，其特徵在於，包括：WebGL指令截取單元，用於截取對3D canvas網頁元素的WebGL繪圖指令；WebGL指令傳送單元，用於將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元，用於根據該指令資訊，產生與該WebGL繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元，用於將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該3D canvas網頁元素的渲染結果。
  17. 根據申請專利範圍第16項之3D canvas網頁元素的渲染裝置，其中，該WebGL指令截取單元，具體用於藉由該3D canvas網頁元素的替換DOM物件，截取該WebGL繪圖指令。
  18. 根據申請專利範圍第16項之3D canvas網頁元素的渲染裝置，其中，該WebGL指令傳送單元包括：指令資訊萃取子單元，用於從該WebGL繪圖指令中萃取該指令資訊；渲染命令產生子單元，用於根據第一預設指令轉換規 則和該指令資訊，產生與該WebGL繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將該渲染命令從傳送到該系統框架層。
  19. 根據申請專利範圍第16項之3D canvas網頁元素的渲染裝置，其中，該OpenGL指令產生單元包括：指令資訊傳送子單元，用於將該指令資訊從該系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在該系統局部層中，根據該指令資訊產生該OpenGL繪圖指令。
  20. 一種電子設備，其特徵在於，包括：顯示器；處理器；以及記憶體，用於儲存實現3D canvas網頁元素的渲染方法的程式，該設備通電並藉由該處理器運行該3D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對3D canvas網頁元素的WebGL繪圖指令；將該WebGL繪圖指令攜帶的指令資訊傳送到系統框架層；根據該指令資訊，產生與該WebGL繪圖指令對應的OpenGL繪圖指令；將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該3D canvas網頁元素的渲染結果。
  21. 一種2D canvas網頁元素的渲染方法，其特徵在於，包括：截取對2D canvas網頁元素的繪圖指令；將該2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；根據該指令資訊，產生與該2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該2D canvas網頁元素的渲染結果。
  22. 根據申請專利範圍第21項之2D canvas網頁元素的渲染方法，其中，該截取對2D canvas網頁元素的WebGL繪圖指令，採用如下方式：藉由該2D canvas網頁元素的替換DOM物件，截取該2D canvas網頁元素的繪圖指令。
  23. 根據申請專利範圍第21項之2D canvas網頁元素的渲染方法，其中，該將該對2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層，包括：從該2D canvas網頁元素的繪圖指令中萃取該指令資訊；根據第一預設指令轉換規則和該指令資訊，產生與該2D canvas網頁元素的繪圖指令對應的渲染命令；將該渲染命令從傳送到該系統框架層。
  24. 根據申請專利範圍第21項之2D canvas網頁元素的渲染方法，其中，該產生與該2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令，包括：將該指令資訊從該系統框架層傳送到系統局部層；在該系統局部層中，根據將該指令資訊產生該OpenGL繪圖指令。
  25. 根據申請專利範圍第24項之2D canvas網頁元素的渲染方法，其中，該將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，包括：獲取該2D canvas網頁元素對應的上下文資訊及渲染目標；根據該上下文資訊和該OpenGL繪圖指令，對該渲染目標進行圖形渲染；將該渲染目標輸入到系統的離螢幕緩衝區。
  26. 根據申請專利範圍第21項之2D canvas網頁元素的渲染方法，其中，還包括：對該OpenGL渲染視窗和系統的Webview視窗進行合成，形成該2D canvas網頁元素所在網頁的渲染結果。
  27. 一種2D canvas網頁元素的渲染裝置，其特徵在於，包括： 指令截取單元，用於截取對2D canvas網頁元素的繪圖指令；指令傳送單元，用於將該2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；OpenGL指令產生單元，用於根據該指令資訊，產生與該2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；OpenGL指令繪製單元，用於將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該2D canvas網頁元素的渲染結果。
  28. 根據申請專利範圍第27項之2D canvas網頁元素的渲染裝置，其中，該指令截取單元，具體用於藉由該2D canvas網頁元素的替換DOM物件，截取該2D canvas網頁元素的繪圖指令。
  29. 根據申請專利範圍第27項之2D canvas網頁元素的渲染裝置，其中，該指令傳送單元包括：指令資訊萃取子單元，用於從該2D canvas網頁元素的繪圖指令中萃取該指令資訊；渲染命令產生子單元，用於根據第一預設指令轉換規則和該指令資訊，產生與該2D canvas網頁元素的繪圖指令對應的渲染命令；渲染命令傳送子單元，用於將該渲染命令從傳送到該 系統框架層。
  30. 根據申請專利範圍第27項之2D canvas網頁元素的渲染裝置，其中，該OpenGL指令產生單元包括：指令資訊傳送子單元，用於將該指令資訊從該系統框架層傳送到系統局部層；OpenGL指令產生子單元，用於在該系統局部層中，根據將該指令資訊產生該OpenGL繪圖指令。
  31. 一種電子設備，其特徵在於，包括：顯示器；處理器；以及記憶體，用於儲存實現2D canvas網頁元素的渲染方法的程式，該設備通電並藉由該處理器運行該2D canvas網頁元素的渲染方法的程式後，執行下述步驟：截取對2D canvas網頁元素的繪圖指令；將該2D canvas網頁元素的繪圖指令攜帶的指令資訊傳送到系統框架層；根據該指令資訊，產生與該2D canvas網頁元素的繪圖指令對應的OpenGL繪圖指令；將該OpenGL繪圖指令繪製到系統的OpenGL渲染視窗，形成該2D canvas網頁元素的渲染結果。
TW106123987A 2016-09-14 2017-07-18 ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備 TW201812613A (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
??201610827353.8 2016-09-14
CN201610827353.8A CN107832108B (zh) 2016-09-14 2016-09-14 3D canvas网页元素的渲染方法、装置及电子设备

Publications (1)

Publication Number Publication Date
TW201812613A true TW201812613A (zh) 2018-04-01

Family

ID=61619759

Family Applications (1)

Application Number Title Priority Date Filing Date
TW106123987A TW201812613A (zh) 2016-09-14 2017-07-18 ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備

Country Status (3)

Country Link
CN (2) CN107832108B (zh)
TW (1) TW201812613A (zh)
WO (1) WO2018050003A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI682291B (zh) * 2018-05-23 2020-01-11 中華電信股份有限公司 網頁之動態生成方法、網頁生成裝置及電腦程式產品

Families Citing this family (39)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110322532A (zh) * 2018-03-27 2019-10-11 优酷网络技术（北京）有限公司 动态图像的生成方法及装置
CN108959392B (zh) 2018-05-31 2020-11-10 创新先进技术有限公司 在3d模型上展示富文本的方法、装置及设备
CN110609682B (zh) * 2018-06-15 2023-09-19 北京蓝亚盒子科技有限公司 一种基于WebGL的图形绘制方法、装置及系统
CN110609677A (zh) * 2018-06-15 2019-12-24 搜游网络科技(北京)有限公司 一种基于WebGL的图形绘制方法、装置及系统
CN109271155A (zh) * 2018-09-11 2019-01-25 Oppo广东移动通信有限公司 游戏平台的能力调用方法及相关产品
CN109343837A (zh) * 2018-09-12 2019-02-15 Oppo广东移动通信有限公司 游戏渲染方法及相关设备
CN109395384A (zh) * 2018-09-12 2019-03-01 Oppo广东移动通信有限公司 游戏渲染方法及相关产品
CN110929201B (zh) * 2018-09-20 2022-06-28 中国科学院信息工程研究所 一种基于Web的复杂网络拓扑编辑及可视化系统
CN109544653B (zh) * 2018-10-26 2023-05-16 深圳点猫科技有限公司 一种基于教育操作系统的WebGL独立进程渲染方法及电子设备
CN109343774B (zh) * 2018-10-29 2021-04-20 广东明星创意动画有限公司 一种快速文件预处理渲染系统
CN109636885B (zh) * 2018-11-28 2023-07-04 广东智合创享营销策划有限公司 一种用于h5页面的序列帧动画制作方法和系统
CN109614563B (zh) * 2018-12-05 2021-06-08 北京达佳互联信息技术有限公司 显示网页的方法、装置、设备及存储介质
CN109658250B (zh) * 2018-12-29 2021-11-12 深圳源中瑞科技有限公司 一种基于网页的股票交易k线处理方法和存储介质
CN111506841B (zh) * 2019-01-30 2023-06-09 阿里巴巴集团控股有限公司 网页展示方法、装置、设备及可读存储介质
CN110083231B (zh) * 2019-03-12 2022-04-08 杭州电子科技大学 一种面向安卓VR一体式头显的WebGL全景显示方法
CN111796812B (zh) * 2019-04-04 2022-11-04 厦门雅基软件有限公司 图像渲染的方法、装置、电子设备及计算机可读存储介质
CN110347463B (zh) * 2019-06-25 2022-04-08 荣耀终端有限公司 图像处理方法、相关设备及计算机存储介质
CN110413914A (zh) * 2019-07-25 2019-11-05 中南民族大学 基于WebGL的渲染方法、装置、设备及存储介质
CN112351222B (zh) * 2019-08-09 2022-05-24 北京字节跳动网络技术有限公司 图像特效处理方法、装置、电子设备和计算机可读存储介质
CN110727481A (zh) * 2019-09-06 2020-01-24 平安国际智慧城市科技股份有限公司 图片编辑方法、装置、计算机设备和存储介质
CN111275782B (zh) * 2020-01-17 2023-09-08 广州图匠数据科技有限公司 一种图形绘制方法、装置、终端设备及存储介质
CN111354063B (zh) * 2020-03-10 2023-09-08 深信服科技股份有限公司 一种三维元素渲染方法、桌面云服务端及桌面云系统
CN111562962B (zh) * 2020-04-29 2023-07-04 百度在线网络技术（北京）有限公司 画面渲染方法、装置、电子设备和存储介质
CN111581564B (zh) * 2020-05-10 2023-12-12 青岛希望鸟科技有限公司 一种应用Canvas实现的网页同步交流方法
CN112269575A (zh) * 2020-11-18 2021-01-26 安徽四创电子股份有限公司 一种canvas绘制动态二维场景的方法
CN112380296A (zh) * 2020-11-23 2021-02-19 北京明略软件系统有限公司 一种er图生成方法、系统、电子设备及存储介质
WO2022104786A1 (zh) * 2020-11-23 2022-05-27 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法
CN112540815B (zh) * 2020-11-23 2023-05-05 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法
CN112947916B (zh) * 2021-02-05 2023-09-19 北京百度网讯科技有限公司 用于实现在线画布的方法、装置、设备以及存储介质
CN112947969B (zh) * 2021-03-10 2022-12-16 支付宝(杭州)信息技术有限公司 一种页面离屏渲染方法、装置、设备和可读介质
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统
CN115937380A (zh) * 2021-08-24 2023-04-07 荣耀终端有限公司 图形渲染方法、装置及存储介质
CN113694523A (zh) * 2021-08-30 2021-11-26 上海哔哩哔哩科技有限公司 基于移动端app的h5游戏显示方法、装置及计算机设备
CN115525852A (zh) * 2021-10-28 2022-12-27 北京字节跳动网络技术有限公司 网页的渲染方法、装置、设备及存储介质
CN114222149A (zh) * 2021-11-17 2022-03-22 武汉斗鱼鱼乐网络科技有限公司 一种推流方法、装置、介质及计算机设备
CN115474074B (zh) * 2022-08-29 2024-05-07 咪咕文化科技有限公司 一种视频背景替换方法、装置、计算设备和存储介质
CN116402937A (zh) * 2023-03-30 2023-07-07 中国舰船研究设计中心 一种基于web的复杂数据3D可视化简化开发方法
CN116700694B (zh) * 2023-08-07 2024-01-26 深圳凡泰极客科技有限责任公司 小程序引擎
CN117093793A (zh) * 2023-08-25 2023-11-21 江西格如灵科技股份有限公司 一种网页3d场景二维显示方法及系统

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN102087598A (zh) * 2011-02-22 2011-06-08 深圳市同洲电子股份有限公司 一种3d界面展示方法、装置及浏览装置
CN102591651B (zh) * 2011-12-26 2015-02-11 Tcl集团股份有限公司 一种网页3d渲染和控制方法及装置
CN103713891B (zh) * 2012-10-09 2017-11-24 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
CN102955854B (zh) * 2012-11-06 2015-11-25 搜游网络科技(北京)有限公司 一种基于html5协议的网页展现方法及装置
CN103336816B (zh) * 2013-06-28 2017-02-08 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
CN104978357B (zh) * 2014-04-10 2018-08-24 阿里巴巴集团控股有限公司 一种数据可视化展现方法和装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI682291B (zh) * 2018-05-23 2020-01-11 中華電信股份有限公司 網頁之動態生成方法、網頁生成裝置及電腦程式產品

Also Published As

Publication number Publication date
WO2018050003A1 (zh) 2018-03-22
CN113282360A (zh) 2021-08-20
CN107832108B (zh) 2021-05-07
CN107832108A (zh) 2018-03-23

Similar Documents

Publication Publication Date Title
TW201812613A (zh) ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備
US11902377B2 (en) Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework
US10207190B2 (en) Technologies for native game experience in web rendering engine
US10013157B2 (en) Composing web-based interactive 3D scenes using high order visual editor commands
AU2009225388B2 (en) Lightweight three-dimensional display
US9122657B2 (en) Webpage display system leveraging OSGI
AU2009225393B2 (en) File access via conduit application
US20150193904A1 (en) Graphics acceleration for applications executing on mobile devices with multi-operating system environment
WO2014190821A1 (zh) 一种创建应用的方法及装置
JP2013546043A (ja) 即時リモートレンダリング
WO2019228013A1 (zh) 在3d模型上展示富文本的方法、装置及设备
US9396564B2 (en) Atlas generation based on client video configuration
US8854368B1 (en) Point sprite rendering in a cross platform environment
WO2019238145A1 (zh) 一种基于WebGL的图形绘制方法、装置及系统
US20190080017A1 (en) Method, system, and device that invokes a web engine
WO2022033131A1 (zh) 基于json数据格式的动画渲染方法
US20160070682A1 (en) Platform abstraction of graphics
TW201913361A (zh) 頁面更新方法和裝置
KR20130017337A (ko) 하이브리드 앱 개발 플랫폼 구조 및 그 테스트 방법, 그리고 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체.
US11758016B2 (en) Hosted application as web widget toolkit
CN109144655B (zh) 图像动态展示的方法、装置、系统及介质
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN115391692A (zh) 视频处理方法和装置
TW201207767A (en) Three-dimensional Web user interface used in embedded devices and realizing method thereof
CN114371838A (zh) 一种小程序画布渲染方法、装置、设备及存储介质