一種網頁顯示方法、裝置、電子設備及存儲介質與流程

本發明涉及計算機技術領域，特別是涉及一種網頁顯示方法、裝置、電子設備及存儲介質。

背景技術：

隨著互聯網信息技術的快速發展，對于網頁的設計更加炫酷，也更加多樣化。網頁多樣化主要體現在對圖片的設計上。現有技術中如果想顯示圖片，或者網頁絢麗的效果的話，往往都是引入圖片地址或者以背景圖的方式實現。在html5(hypertextmark-uplanguage5，超文本標記語言第5版)以后，引入了canvas元素(canvas元素用于在網頁上繪制圖形)，開發者可以使用canvas構建網頁顯示效果。

現有技術中使用canvas構建網頁顯示效果具體如下：首先創建一個空的畫布，可以使用setbitmap()方法來創建畫布。設置該畫布的背景色、顯示區域等屬性信息。使用canvas(bitmapbitmap)函數將已擬定好的某一個柱狀圖、線形圖、餅狀圖、表格以及一些簡單的線條繪制在bitmap，并將繪制完成的內容添加在空畫布上，即可完成一個簡單的畫圖。將完成的畫圖添加到網頁上，顯示使用html5的canvas元素完成的畫圖。

現有技術中canvas的運用不算廣泛，使用html5的canvas元素構造圖片的方式簡單固定，完成的畫圖都是一些已擬定好的簡單圖像，以至于網頁的顯示形式單一，不能滿足用戶個性化的顯示方式。

技術實現要素：

本發明實施例的目的在于提供一種網頁顯示方法、裝置、電子設備及存儲介質，豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。具體技術方案如下：

為達到上述發明目的，本發明實施例公開了一種網頁顯示方法，包括：

在超文本標記語言html頁面中，確定基礎canvas畫布，在所述基礎canvas畫布中添加用戶繪畫；

確定至少一個待添加自定義內容，給所述至少一個待添加自定義內容添加唯一的canvas標簽，將所述至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，所述待添加自定義內容至少包括：自定義圖片、自定義表格；

通過圖層顯示優先級處理以及圖像處理技術，將所述基礎canvas畫布中用戶繪畫以及所述基礎canvas畫布中所述img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示所述目標圖像。

可選地，所述在超文本標記語言html頁面中，確定基礎canvas畫布，在所述基礎canvas畫布中添加用戶繪畫，包括：

在所述html頁面的img標簽中添加基礎canvas畫布標簽，在所述基礎canvas畫布標簽中確定基礎canvas畫布；

通過javascript確定所述基礎canvas畫布的基本屬性，所述基本屬性包括：起始位置、顏色、弧度；

在所述基礎canvas畫布中添加觸發事件操作函數；

通過所述觸發事件操作函數，檢測當前用戶的用戶繪畫操作，在所述基礎canvas畫布中添加所述當前用戶的用戶繪畫。

可選地，所述確定至少一個待添加自定義內容，給所述至少一個待添加自定義內容添加唯一的canvas標簽，將所述至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，包括：

通過調整至少一個圖片的透明度效果，將所述至少一個圖片作為添加到所述基礎canvas畫布中的至少一個背景圖片；

通過調整至少一個圖片的尺寸大小小于預設尺寸大小，形成至少一個圖標圖片；

按照預設周期調整至少一個圖片的顯示尺寸，形成至少一個動態顯示圖片；

將所述至少一個背景圖片、至少一個圖標圖片以及至少一個動態顯示圖片，確定為至少一個自定義圖片，給所述至少一個自定義圖片的每個圖片添加唯一的canvas標簽；

通過自定義函數確定至少一個自定義表格，給所述至少一個自定義表格的每個表格添加唯一的canvas標簽。

可選地，所述通過圖層顯示優先級處理以及圖像處理技術，將所述基礎canvas畫布中用戶繪畫以及所述基礎canvas畫布中所述img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示所述目標圖像，包括：

通過圖像處理技術，確定所述img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置；

通過圖層顯示優先級處理，確定每個canvas標簽對應內容的圖層顯示優先級；

通過圖像合成技術，將所述基礎canvas畫布中用戶繪畫以及所述基礎canvas畫布中所述img標簽中隱藏的canvas標簽對應自定義內容，按照顯示位置以及圖層顯示優先級順序，合成所述目標圖像；

通過圖像編碼技術以及圖像顯示技術，在網頁中顯示所述目標圖像。

可選地，所述自定義內容的顯示位置包括：至少一個自定義表格的顯示位置、至少一個圖標圖片的顯示位置、至少一個動態顯示圖片的顯示位置中、至少一個背景圖片的顯示位置，其中，所述至少一個自定義表格的顯示位置、所述至少一個圖標圖片的顯示位置、所述至少一個動態顯示圖片的顯示位置中兩兩顯示位置不重合。

為達到上述發明目的，本發明實施例還公開了一種網頁顯示裝置，包括：

繪畫模塊，用于在超文本標記語言html頁面中，確定基礎canvas畫布，在所述基礎canvas畫布中添加用戶繪畫；

自定義模塊，用于確定至少一個待添加自定義內容，給所述至少一個待添加自定義內容添加唯一的canvas標簽，將所述至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，所述待添加自定義內容至少包括：自定義圖片、自定義表格；

顯示模塊，用于通過圖層顯示優先級處理以及圖像處理技術，將所述基礎canvas畫布中用戶繪畫以及所述基礎canvas畫布中所述img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示所述目標圖像。

可選地，所述繪畫模塊，包括：

確定子模塊，用于在所述html頁面的img標簽中添加基礎canvas畫布標簽，在所述基礎canvas畫布標簽中確定基礎canvas畫布；

屬性確定子模塊，用于通過javascript確定基礎canvas畫布的基本屬性，所述基本屬性包括：起始位置、顏色、弧度參數；

添加子模塊，用于在所述基礎canvas畫布中添加觸發事件操作函數；

繪畫子模塊，用于通過所述觸發事件操作函數，檢測當前用戶的用戶繪畫操作，在所述基礎canvas畫布中添加所述當前用戶的用戶繪畫。

可選地，所述自定義模塊，包括：

背景圖片確定子模塊，用于通過調整至少一個圖片的透明度效果，將所述至少一個圖片作為添加到所述基礎canvas畫布中的至少一個背景圖片；

圖標圖片確定子模塊，用于通過調整至少一個圖片的尺寸大小小于預設尺寸大小，形成至少一個圖標圖片；

動態圖片確定子模塊，用于按照預設周期調整至少一個圖片的顯示尺寸，形成至少一個動態顯示圖片；

自定義圖片子模塊，用于將所述至少一個背景圖片、至少一個圖標圖片以及至少一個動態顯示圖片，確定為至少一個自定義圖片，給所述至少一個自定義圖片的每個圖片添加唯一的canvas標簽；

自定義表格子模塊，用于通過自定義函數確定至少一個自定義表格，給所述至少一個自定義表格的每個表格添加唯一的canvas標簽。

為達到上述發明目的，本發明實施例還公開了一種電子設備，包括處理器、通信接口、存儲器和通信總線，其中，所述處理器、所述通信接口、所述存儲器通過所述通信總線完成相互間的通信；

所述存儲器，用于存放計算機程序；

所述處理器，用于執行所述存儲器上所存放的程序時，實現上述網頁顯示方法的任一方法的步驟。

為達到上述發明目的，本發明實施例還公開了一種計算機可讀存儲介質，所述計算機可讀存儲介質內存儲有計算機程序，所述計算機程序被處理器執行時實現上述網頁顯示方法的任一方法的步驟。

本發明實施例提供了一種網頁顯示方法、裝置、電子設備及存儲介質，具體為在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，實現了用戶基本繪畫操作。另外，通過確定至少一個自定義圖片、至少一個自定義表格，給至少一個自定義圖片的每個圖片以及至少一個自定義表格的每個表格添加唯一的canvas標簽，將至少一個自定義圖片、至少一個自定義表格對應的唯一canvas標簽隱藏在html頁面的img標簽中，實現了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網頁內容。最后，通過優先級處理以及圖像處理技術，在網頁中顯示基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應的內容，實現了在網頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內容顯示。本發明實施例最終達到了豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。

附圖說明

為了更清楚地說明本發明實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。

圖1為本發明實施例的一種網頁顯示方法流程圖；

圖2為本發明實施例的網頁顯示方法的基礎canvas畫布的一種畫圖方法流程圖；

圖3為本發明實施例的網頁顯示方法的一種自定義內容添加canvas標簽的方法流程圖；

圖4為本發明實施例的網頁顯示方法的一種目標圖像合成方法流程圖；

圖5為本發明實施例的一種網頁顯示裝置示意圖；

圖6為本發明實施例的一種電子設備示意圖。

具體實施方式

下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明一部分實施例，而不是全部的實施例。基于本發明中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬于本發明保護的范圍。

為達到上述發明目的，本發明實施例公開了一種網頁顯示方法，如圖1所示。圖1為本發明實施例的一種網頁顯示方法流程圖，包括：

s101，在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫。

canvas元素用于在網頁上繪制圖形，html5的canvas元素使用javascript在網頁上繪制2d圖像。像所有的dom(documentobjectmodel，文檔對象模型)一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法。在矩形區域的畫布上，javascript繪制2d圖形，逐像素進行渲染，可以通過多種方法使用canvas元素繪制路徑、矩形、圓形、字符以及添加圖像。

在本發明實施例中，要在html頁面中使用canvas元素實現畫圖功能，首先在html頁面中創建一個空的canvas畫布，設置該空canvas畫布的屬性，在該空畫布上用戶進行繪畫。

具體為，在html頁面的canvas元素下創建一個新的空canvas畫布，作為本發明實施例的基礎canvas畫布。設置該基礎canvas畫布的基本屬性，包括畫布尺寸、畫布背景、線條顏色。線條粗細等。在該基礎canvas畫布上設置檢測用戶操作的函數，當檢測到用戶具體操作后，按照該基礎canvas畫布的定義的繪畫方式，將對應于用戶操作的繪畫添加到該基礎canvas畫布上。

s102，確定至少一個待添加自定義內容，給至少一個待添加自定義內容添加唯一的canvas標簽，將至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，待添加自定義內容至少包括：自定義圖片、自定義表格。

在上述基礎canvas畫布上完成用戶繪畫后，為了豐富網頁的展示效果，可添加用戶自定義的其他內容。

html頁面的img標簽定義了html頁面中的圖像，img標簽有兩個必需的屬性：src和alt。從技術上講，圖像并不會插入html頁面中，而是鏈接到html頁面上。img標簽的作用是為被引用的圖像創建占位符。img標簽支持html的全局屬性以及事件屬性。

具體地，為豐富html頁面的展示，在使用canvas元素完成用戶繪畫后，要添加用戶自定義的其他內容，每添加一個新內容，需要使用canvas元素創建一個新的標簽。則使用canvas元素為至少一個待添加自定義內容創建對應個數的至少一個canvas標簽。該待添加自定義內容可為自定義圖片、自定義表格，其他自定義形式的內容可是可取的。因為img標簽定義了html頁面中的圖像，所以所有使用canvas元素添加的canvas標簽都隱藏在img標簽中，鏈接到html頁面上，通過鏈接調用隱藏在img標簽中所有canvas標簽對應的內容。

需要說明的是，其他自定義形式的內容通過添加canvas標簽，將地址對應鏈接到html頁面上的方式都屬于本發明實施例的保護范圍，在此不再贅述。

s103，通過圖層顯示優先級處理以及圖像處理技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示目標圖像。

在上述給所有自定義的內容添加了canvas標簽后，存在所有canvas標簽對應內容的顯示層級問題。在本發明實話實例中，通過圖層顯示優先級處理為不同canvas標簽設置不同的圖層優先級，以使將canvas標簽對應的內容按照該設置的圖層優先級顯示。

具體地，確定所有canvas標簽對應內容的圖層顯示優先級。通過圖像處理技術，將確定好圖層顯示的基礎canvas畫布中用戶繪畫以及自定義內容合成目標圖像。通過圖像顯示技術，顯示該目標圖像對應的基礎canvas畫布中用戶繪畫以及img標簽中隱藏的canvas標簽對應自定義內容。

本發明實施例提供了一種網頁顯示方法，具體為在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，實現了用戶基本繪畫操作。另外，通過確定至少一個自定義圖片、至少一個自定義表格，給至少一個自定義圖片的每個圖片以及至少一個自定義表格的每個表格添加唯一的canvas標簽，將至少一個自定義圖片、至少一個自定義表格對應的唯一canvas標簽隱藏在html頁面的img標簽中，實現了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網頁內容。最后，通過優先級處理以及圖像處理技術，在網頁中顯示基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應的內容，實現了在網頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內容顯示。本發明實施例最終達到了豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。

可選地，在本發明實施例的網頁顯示方法的一種實施例中，在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，如圖2所示。圖2為本發明實施例的網頁顯示方法的基礎canvas畫布的一種畫圖方法流程圖，包括：

s201，在html頁面的img標簽中添加基礎canvas畫布標簽，在基礎canvas畫布標簽中確定基礎canvas畫布。

具體地，在html頁面中先確定基礎canvas畫布的結構。該結構相對來說比較簡單，只需在img標簽下創建一個canvas標簽即可，將canvas標簽對應的canvas畫布確定為基礎canvas畫布。

s202，通過javascript確定基礎canvas畫布的基本屬性，基本屬性包括：起始位置、顏色、弧度。

在上述基礎canvas畫布上，通過javascript確定該基礎canvas畫布中用戶當前繪畫的基本屬性。包括用戶當前畫筆的顏色、線條粗細、弧度以及線條的起止位置等。

s203，在基礎canvas畫布中添加觸發事件操作函數。

在上述完成用戶當前操作的基礎canvas畫布對應的基本屬性后，在該canvas畫布中添加檢測用戶操作的觸發事件操作函數，以使該基礎canvas畫布檢測到用戶的操作，并將用戶對應的繪畫操作添加到該基礎canvas畫布上。

例如，在上述完成用戶當前操作的基礎canvas畫布對應的基本屬性后，可編寫click和touch操作函數，檢測當前用戶的用戶繪畫操作。

s204，通過觸發事件操作函數，檢測當前用戶的用戶繪畫操作，在基礎canvas畫布中添加當前用戶的用戶繪畫。

在上述添加的觸發事件操作函數，檢測到當前用戶的用戶繪畫操作后，在該基礎canvas畫布中添加當前用戶的用戶繪畫。

具體的，在該canvas畫布中使用的基礎操作函數如下：使用beginpath()在該基礎canvas畫布中開始一條新的路徑；使用g.strokestyle定義該基礎canvas畫布中線條要使用的顏色；使用g.fillstyle定義在該基礎canvas畫布上繪畫的線條閉合后，填充的顏色；使用moveto()將該基礎canvas畫布上窗口的左上角移動到一個指定的坐標；使用quadraticcurveto()繪制一條貝塞爾曲線；使用lineto()在該基礎canvas畫布中添加一個新點，然后創建從該點到畫布中最后指定點的線條；使用closepath()創建從當前點到開始點的路徑(形成一個閉合)；使用fill()函數填充路徑之內的顏色；使用stroke()函數繪制當前路徑。

通過觸發事件操作函數，檢測當前用戶的用戶繪畫操作，通過上述函數用戶可在基礎canvas畫布中完成當前繪畫。

可見，通過本發明實施例，可實現在基礎canvas畫布中按照用戶操作完成基本繪畫。

可選地，在本發明實施例的網頁顯示方法的一種實施例中，確定至少一個待添加自定義內容，給至少一個待添加自定義內容添加唯一的canvas標簽，將至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，如圖3所示。圖3為本發明實施例的網頁顯示方法的一種自定義內容添加canvas標簽的方法流程圖，包括：

s301，通過調整至少一個圖片的透明度效果，將至少一個圖片作為添加到基礎canvas畫布中的至少一個背景圖片。

具體地，可調整現有至少一個圖片或者用戶自己繪畫的圖片的透明度，將透明度調整成適合添加在該基礎canvas畫布中不遮擋用戶已完成的繪畫的透明度效果。將調整好的至少一個圖片作為添加到基礎canvas畫布中的至少一個背景圖片。在添加時，用戶可根據自身需要選擇是否全部添加到該基礎canvas畫布中，或者只選取設置好透明度圖片的部分圖片添加到該基礎canvas畫布中。

s302，通過調整至少一個圖片的尺寸大小小于預設尺寸大小，形成至少一個圖標圖片。

在本發明實施例中，為添加到基礎canvas畫布的圖片設置圖片的固定長度和固定寬度，將該固定長度定義為預設長度以及將該固定寬度定義為預設寬度，將該預設長度以及預設寬度確定的尺寸大小定義為本發明實施例的預設尺寸。

調整已有的至少一個圖片尺寸大小小于預設尺寸，形成至少一個圖標圖片。具體地，可調整所有已有圖片尺寸大小為小于預設尺寸統一大小的圖片，形成至少一個圖標圖片。可調整所有已有圖片的寬度小于預設寬度，形成至少一個圖標圖片。可調整所有已有圖片的長度小于預設長度，形成至少一個圖標圖片。另外，還可調整所有已有圖片中部分圖片的寬度小于預設寬度，部分圖片的長度小于預設長度，形成至少一個圖標圖片。

s303，按照預設周期調整至少一個圖片的顯示尺寸，形成至少一個動態顯示圖片。

在本發明實施例中，為增加圖片顯示的多樣性，可增加動態顯示圖片。即為調整每張圖片在不同時間段內顯示不同的尺寸大小，實現周期動態顯示的效果。在本發明實施例中，將該周期定義為預設周期。

在本發明實例中，調整圖片的顯示尺寸隨預設周期變化而變化。例如，可設置該預設周期為5s，設置每5s內圖片不同顯示尺寸。可設置第一個5s內圖片在原圖片尺寸上變大，在下一個5s內圖片還原該圖片的原圖片尺寸；或者可設置第一個5s內在原圖片尺寸上變小，在下一個5s內還原該圖片的原圖片尺寸。另外，可設置第一個5s內圖片在原圖片尺寸上變大，在下一個5s內該圖片在原圖片尺寸上變小；或者可設置第一個5s內該圖片在原圖片尺寸上變小，在下一個5s內該圖片在原圖片尺寸上變大。預設時間的長度可由用戶根據實際需要自行設定，變化方式也可由用戶根據實際情況自行設定。

需要說明的是，按照預設周期調整至少一個圖片的顯示尺寸，形成至少一個動態顯示圖片的任一種實現方式，都屬于本發明實施例的保護范圍，在此不再一一贅述。

s304，將至少一個背景圖片、至少一個圖標圖片以及至少一個動態顯示圖片，確定為至少一個自定義圖片，給至少一個自定義圖片的每個圖片添加唯一的canvas標簽。

具體地，將上述至少一個背景圖片、至少一個圖標圖片以及至少一個動態顯示圖片，定義為本發明實施例的至少一個自定義圖片。在html頁面的canvas元素中為每個自定義圖片對應添加唯一的canvas標簽。將所有的canvas標簽隱藏在html頁面的img標簽中。

s305，通過自定義函數確定至少一個自定義表格，給至少一個自定義表格的每個表格添加唯一的canvas標簽。

在上述完成至少一個自定義圖片后，還可給該html頁面中添加自定義表格。

具體為提前自定義好自定義函數，通過該自定義函數確定至少一個自定義表格。將在html頁面的canvas元素中為每個自定義表格對應添加唯一的canvas標簽。將所有的canvas標簽隱藏在html頁面的img標簽中。

可見，通過本發明實施例將更多自定義內容添加在canvas元素中，將在canvas元素中對應添加的自定義內容添加到html頁面中，實現html頁面的多元化，豐富html頁面的顯示。

可選地，在本發明實施例的網頁顯示方法的一種實施例中，通過圖層顯示優先級處理以及圖像處理技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示目標圖像，如圖4所示。圖4為本發明實施例的網頁顯示方法的一種目標圖像合成方法流程圖，包括：

s401，通過圖像處理技術，確定img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置。

在本發明實施例中，通過設置top和left的值來確定img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置。

具體為，確定img標簽中隱藏的canvas標簽對應的至少一個自定義表格的顯示位置；確定img標簽中隱藏的canvas標簽對應的至少一個背景圖片的顯示位置；確定img標簽中隱藏的canvas標簽對應的至少一個圖標圖片的顯示位置；確定img標簽中隱藏的canvas標簽對應的至少一個動態顯示圖片的顯示位置。其中，至少一個自定義表格的顯示位置、至少一個圖標圖片的顯示位置、至少一個動態顯示圖片的顯示位置中、至少一個背景圖片的顯示位置，其中，至少一個自定義表格的顯示位置、至少一個圖標圖片的顯示位置、至少一個動態顯示圖片的顯示位置中兩兩顯示位置不重合。

s402，通過圖層顯示優先級處理，確定每個canvas標簽對應內容的圖層顯示優先級。

在img標簽中隱藏的所有canvas標簽對應的內容在顯示時候可能會出現重疊現象，因此需要對每個canvas標簽對應的內容的圖層設置優先級，在本發明實施例中將每個canvas標簽對應內容的圖層設置優先級的方式，定義為圖層顯示優先級處理。

具體地，在上述通過圖像處理技術，確定img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置后，通過圖層顯示優先級處理，可設置canvas標簽中zindex的值，為每個canvas標簽對應內容的圖層設置顯示的優先級。

例如，可按照數字從小到大的順序，對應設置至少一個自定義內容的由低到高的優先級先后順序。可將自定義圖片中的至少一個背景圖片的優先級設為最低優先級；將自定義圖片中的至少一個圖標圖片的優先級設為略高于至少一個背景圖片的優先級；將自定義圖片中的至少一個動態圖片的優先級設為略高于至少一個圖標圖片的優先級；將至少一個表格的優先級設為與自定義圖片中的至少一個動態圖片的優先級同級。將基礎canvas畫布上添加的當前用戶的用戶繪畫的優先級設為最高優先級。

需要說明的是，上述通過圖層顯示優先級處理為canvas標簽對應內容設置的圖層優先級僅為顯示的一種優先級，其他按照該方法為canvas標簽對應的內容設置優先級的方式也是可取的，都屬于本發明實施例的保護范圍。

s403，通過圖像合成技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容，按照顯示位置以及圖層顯示優先級順序，合成目標圖像。

具體地，按照上述圖像處理技術，確定img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置，以及通過圖層顯示優先級處理，確定每個canvas標簽對應內容的圖層顯示優先級后，通過圖像合成技術，按照上述確定好的位置以及圖層優先級，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像。

s404，通過圖像編碼技術以及圖像顯示技術，在網頁中顯示目標圖像。

在上述通過圖像合成技術合成目標圖像后，通過圖像編碼技術以及圖像顯示技術，在網頁中顯示目標圖像。

具體地，可利用base64編碼技術以及圖像顯示技術，將目標圖像輸出在html頁面上可提供用戶下載。

可見，通過本發明實施例的網頁顯示方法的一種目標圖像合成方法，可實現將canvas元素中的用戶繪畫以及canvas標簽對應自定義內容合成目標圖像，在網頁中顯示該目標圖像，最終豐富了html頁面的顯示，以及根據不同用戶添加的不同的自定義內容，以及設置所有canvas標簽對應內容的不同優先級，實現了用戶個性化內容的網頁顯示效果。

為達到上述發明目的，本發明實施例還公開了一種網頁顯示裝置，如圖5所示。圖5為本發明實施例的一種網頁顯示裝置示意圖，包括：

繪畫模塊501，用于在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫。

自定義模塊502，用于確定至少一個待添加自定義內容，給至少一個待添加自定義內容添加唯一的canvas標簽，將至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，待添加自定義內容至少包括：自定義圖片、自定義表格。

顯示模塊503，用于通過圖層顯示優先級處理以及圖像處理技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示目標圖像。

本發明實施例提供了一種網頁顯示裝置，具體為在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，實現了用戶基本繪畫操作。另外，通過確定至少一個自定義圖片、至少一個自定義表格，給至少一個自定義圖片的每個圖片以及至少一個自定義表格的每個表格添加唯一的canvas標簽，將至少一個自定義圖片、至少一個自定義表格對應的唯一canvas標簽隱藏在html頁面的img標簽中，實現了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網頁內容。最后，通過優先級處理以及圖像處理技術，在網頁中顯示基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應的內容，實現了在網頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內容顯示。本發明實施例最終達到了豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。

需要說明的是，本發明實施例的裝置是應用上述一種網頁顯示方法的裝置，則上述網頁顯示方法的所有實施例均適用于該裝置，且均能達到相同或相似的有益效果。

可選地，在本發明實施例的網頁顯示裝置的一種實施例中，繪畫模塊501，包括：

確定子模塊，用于在html頁面的img標簽中添加基礎canvas畫布標簽，在基礎canvas畫布標簽中確定基礎canvas畫布。

屬性確定子模塊，用于通過javascript確定基礎canvas畫布的基本屬性，基本屬性包括：起始位置、顏色、弧度參數。

添加子模塊，用于在基礎canvas畫布中添加觸發事件操作函數。

繪畫子模塊，用于通過觸發事件操作函數，檢測當前用戶的用戶繪畫操作，在基礎canvas畫布中添加當前用戶的用戶繪畫。

可選地，在本發明實施例的網頁顯示裝置的一種實施例中，自定義模塊502，包括：

背景圖片確定子模塊，用于通過調整至少一個圖片的透明度效果，將至少一個圖片作為添加到基礎canvas畫布中的至少一個背景圖片。

圖標圖片確定子模塊，用于通過調整至少一個圖片的尺寸大小小于預設尺寸大小，形成至少一個圖標圖片。

動態圖片確定子模塊，用于按照預設周期調整至少一個圖片的顯示尺寸，形成至少一個動態顯示圖片。

自定義圖片子模塊，用于將至少一個背景圖片、至少一個圖標圖片以及至少一個動態顯示圖片，確定為至少一個自定義圖片，給至少一個自定義圖片的每個圖片添加唯一的canvas標簽。

自定義表格子模塊，用于通過自定義函數確定至少一個自定義表格，給至少一個自定義表格的每個表格添加唯一的canvas標簽。

可選地，在本發明實施例的網頁顯示裝置的一種實施例中，顯示模塊503，包括：

顯示位置確定子模塊，用于通過圖像處理技術，確定img標簽中隱藏的每個canvas標簽對應的自定義內容的顯示位置。

優先級確定子模塊，用于通過圖層顯示優先級處理，確定每個canvas標簽對應內容的圖層顯示優先級。

圖像合成子模塊，用于通過圖像合成技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容，按照顯示位置以及圖層顯示優先級順序，合成目標圖像。

顯示子模塊，用于通過圖像編碼技術以及圖像顯示技術，在網頁中顯示目標圖像。

可選地，在本發明實施例的網頁顯示裝置的一種實施例中，自定義內容的顯示位置包括：至少一個自定義表格的顯示位置、至少一個圖標圖片的顯示位置、至少一個動態顯示圖片的顯示位置中、至少一個背景圖片的顯示位置，其中，至少一個自定義表格的顯示位置、至少一個圖標圖片的顯示位置、至少一個動態顯示圖片的顯示位置中兩兩顯示位置不重合。

為達到上述發明目的，本發明實施例還公開了一種電子設備，如圖6所示。圖6為本發明實施例的一種電子設備示意圖，包括處理器601、通信接口602、存儲器603和通信總線604，其中，處理器601，通信接口602，存儲器603通過通信總線604完成相互間的通信，

存儲器603，用于存放計算機程序；

處理器601，用于執行存儲器603上所存放的程序時，實現如下步驟：

在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫；

確定至少一個待添加自定義內容，給至少一個待添加自定義內容添加唯一的canvas標簽，將至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，待添加自定義內容至少包括：自定義圖片、自定義表格；

通過圖層顯示優先級處理以及圖像處理技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示目標圖像。

上述電子設備提到的通信總線604可以是外設部件互連標準(peripheralcomponentinterconnect，pci)總線或擴展工業標準結構(extendedindustrystandardarchitecture，eisa)總線等。該通信總線604可以分為地址總線、數據總線、控制總線等。為便于表示，圖中僅用一條粗線表示，但并不表示僅有一根總線或一種類型的總線。

通信接口602用于上述電子設備與其他設備之間的通信。

存儲器603可以包括隨機存取存儲器(randomaccessmemory，ram)，也可以包括非易失性存儲器(non-volatilememory，nvm)，例如至少一個磁盤存儲器。可選的，存儲器603還可以是至少一個位于遠離前述處理器的存儲裝置。

上述的處理器603可以是通用處理器，包括中央處理器(centralprocessingunit，cpu)、網絡處理器(networkprocessor，np)等；還可以是數字信號處理器(digitalsignalprocessing，dsp)、專用集成電路(applicationspecificintegratedcircuit，asic)、現場可編程門陣列(field-programmablegatearray，fpga)或者其他可編程邏輯器件、分立門或者晶體管邏輯器件、分立硬件組件。

本發明實施例提供了一種電子設備，具體為在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，實現了用戶基本繪畫操作。另外，通過確定至少一個自定義圖片、至少一個自定義表格，給至少一個自定義圖片的每個圖片以及至少一個自定義表格的每個表格添加唯一的canvas標簽，將至少一個自定義圖片、至少一個自定義表格對應的唯一canvas標簽隱藏在html頁面的img標簽中，實現了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網頁內容。最后，通過優先級處理以及圖像處理技術，在網頁中顯示基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應的內容，實現了在網頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內容顯示。本發明實施例最終達到了豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。

為達到上述發明目的，本發明實施例還公開了一種計算機可讀存儲介質，計算機可讀存儲介質內存儲有計算機程序，計算機程序被處理器執行時實現如下步驟：

在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫；

確定至少一個待添加自定義內容，給至少一個待添加自定義內容添加唯一的canvas標簽，將至少一個待添加自定義內容對應的canvas標簽隱藏在html頁面的img標簽中，其中，待添加自定義內容至少包括：自定義圖片、自定義表格；

通過圖層顯示優先級處理以及圖像處理技術，將基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應自定義內容合成目標圖像，在網頁中顯示目標圖像。

本發明實施例提供了一種計算機可讀存儲介質，具體為在超文本標記語言html頁面中，確定基礎canvas畫布，在基礎canvas畫布中添加用戶繪畫，實現了用戶基本繪畫操作。另外，通過確定至少一個自定義圖片、至少一個自定義表格，給至少一個自定義圖片的每個圖片以及至少一個自定義表格的每個表格添加唯一的canvas標簽，將至少一個自定義圖片、至少一個自定義表格對應的唯一canvas標簽隱藏在html頁面的img標簽中，實現了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網頁內容。最后，通過優先級處理以及圖像處理技術，在網頁中顯示基礎canvas畫布中用戶繪畫以及基礎canvas畫布中img標簽中隱藏的canvas標簽對應的內容，實現了在網頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內容顯示。本發明實施例最終達到了豐富網頁顯示以及實現用戶個性化內容的網頁顯示效果。

需要說明的是，在本文中，諸如第一和第二等之類的關系術語僅僅用來將一個實體或者操作與另一個實體或操作區分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關系或者順序。而且，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括要素的過程、方法、物品或者設備中還存在另外的相同要素。

本說明書中的各個實施例均采用相關的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對于裝置、電子設備及計算機可讀存儲介質實施例而言，由于其基本相似于方法實施例，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。

以上僅為本發明的較佳實施例而已，并非用于限定本發明的保護范圍。凡在本發明的精神和原則之內所作的任何修改、等同替換、改進等，均包含在本發明的保護范圍內。