本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別是涉及一種網(wǎng)頁顯示方法、裝置、電子設(shè)備及存儲介質(zhì)。

背景技術(shù)：

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

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

現(xiàn)有技術(shù)中canvas的運(yùn)用不算廣泛，使用html5的canvas元素構(gòu)造圖片的方式簡單固定，完成的畫圖都是一些已擬定好的簡單圖像，以至于網(wǎng)頁的顯示形式單一，不能滿足用戶個(gè)性化的顯示方式。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明實(shí)施例的目的在于提供一種網(wǎng)頁顯示方法、裝置、電子設(shè)備及存儲介質(zhì)，豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。具體技術(shù)方案如下：

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例公開了一種網(wǎng)頁顯示方法，包括：

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

確定至少一個(gè)待添加自定義內(nèi)容，給所述至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將所述至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，所述待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格；

通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將所述基礎(chǔ)canvas畫布中用戶繪畫以及所述基礎(chǔ)canvas畫布中所述img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示所述目標(biāo)圖像。

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

在所述html頁面的img標(biāo)簽中添加基礎(chǔ)canvas畫布標(biāo)簽，在所述基礎(chǔ)canvas畫布標(biāo)簽中確定基礎(chǔ)canvas畫布；

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

在所述基礎(chǔ)canvas畫布中添加觸發(fā)事件操作函數(shù)；

通過所述觸發(fā)事件操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作，在所述基礎(chǔ)canvas畫布中添加所述當(dāng)前用戶的用戶繪畫。

可選地，所述確定至少一個(gè)待添加自定義內(nèi)容，給所述至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將所述至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，包括：

通過調(diào)整至少一個(gè)圖片的透明度效果，將所述至少一個(gè)圖片作為添加到所述基礎(chǔ)canvas畫布中的至少一個(gè)背景圖片；

通過調(diào)整至少一個(gè)圖片的尺寸大小小于預(yù)設(shè)尺寸大小，形成至少一個(gè)圖標(biāo)圖片；

按照預(yù)設(shè)周期調(diào)整至少一個(gè)圖片的顯示尺寸，形成至少一個(gè)動態(tài)顯示圖片；

將所述至少一個(gè)背景圖片、至少一個(gè)圖標(biāo)圖片以及至少一個(gè)動態(tài)顯示圖片，確定為至少一個(gè)自定義圖片，給所述至少一個(gè)自定義圖片的每個(gè)圖片添加唯一的canvas標(biāo)簽；

通過自定義函數(shù)確定至少一個(gè)自定義表格，給所述至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽。

可選地，所述通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將所述基礎(chǔ)canvas畫布中用戶繪畫以及所述基礎(chǔ)canvas畫布中所述img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示所述目標(biāo)圖像，包括：

通過圖像處理技術(shù)，確定所述img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置；

通過圖層顯示優(yōu)先級處理，確定每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層顯示優(yōu)先級；

通過圖像合成技術(shù)，將所述基礎(chǔ)canvas畫布中用戶繪畫以及所述基礎(chǔ)canvas畫布中所述img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容，按照顯示位置以及圖層顯示優(yōu)先級順序，合成所述目標(biāo)圖像；

通過圖像編碼技術(shù)以及圖像顯示技術(shù)，在網(wǎng)頁中顯示所述目標(biāo)圖像。

可選地，所述自定義內(nèi)容的顯示位置包括：至少一個(gè)自定義表格的顯示位置、至少一個(gè)圖標(biāo)圖片的顯示位置、至少一個(gè)動態(tài)顯示圖片的顯示位置中、至少一個(gè)背景圖片的顯示位置，其中，所述至少一個(gè)自定義表格的顯示位置、所述至少一個(gè)圖標(biāo)圖片的顯示位置、所述至少一個(gè)動態(tài)顯示圖片的顯示位置中兩兩顯示位置不重合。

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例還公開了一種網(wǎng)頁顯示裝置，包括：

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

自定義模塊，用于確定至少一個(gè)待添加自定義內(nèi)容，給所述至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將所述至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，所述待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格；

顯示模塊，用于通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將所述基礎(chǔ)canvas畫布中用戶繪畫以及所述基礎(chǔ)canvas畫布中所述img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示所述目標(biāo)圖像。

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

確定子模塊，用于在所述html頁面的img標(biāo)簽中添加基礎(chǔ)canvas畫布標(biāo)簽，在所述基礎(chǔ)canvas畫布標(biāo)簽中確定基礎(chǔ)canvas畫布；

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

添加子模塊，用于在所述基礎(chǔ)canvas畫布中添加觸發(fā)事件操作函數(shù)；

繪畫子模塊，用于通過所述觸發(fā)事件操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作，在所述基礎(chǔ)canvas畫布中添加所述當(dāng)前用戶的用戶繪畫。

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

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

圖標(biāo)圖片確定子模塊，用于通過調(diào)整至少一個(gè)圖片的尺寸大小小于預(yù)設(shè)尺寸大小，形成至少一個(gè)圖標(biāo)圖片；

動態(tài)圖片確定子模塊，用于按照預(yù)設(shè)周期調(diào)整至少一個(gè)圖片的顯示尺寸，形成至少一個(gè)動態(tài)顯示圖片；

自定義圖片子模塊，用于將所述至少一個(gè)背景圖片、至少一個(gè)圖標(biāo)圖片以及至少一個(gè)動態(tài)顯示圖片，確定為至少一個(gè)自定義圖片，給所述至少一個(gè)自定義圖片的每個(gè)圖片添加唯一的canvas標(biāo)簽；

自定義表格子模塊，用于通過自定義函數(shù)確定至少一個(gè)自定義表格，給所述至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽。

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

所述存儲器，用于存放計(jì)算機(jī)程序；

所述處理器，用于執(zhí)行所述存儲器上所存放的程序時(shí)，實(shí)現(xiàn)上述網(wǎng)頁顯示方法的任一方法的步驟。

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例還公開了一種計(jì)算機(jī)可讀存儲介質(zhì)，所述計(jì)算機(jī)可讀存儲介質(zhì)內(nèi)存儲有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述網(wǎng)頁顯示方法的任一方法的步驟。

本發(fā)明實(shí)施例提供了一種網(wǎng)頁顯示方法、裝置、電子設(shè)備及存儲介質(zhì)，具體為在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫，實(shí)現(xiàn)了用戶基本繪畫操作。另外，通過確定至少一個(gè)自定義圖片、至少一個(gè)自定義表格，給至少一個(gè)自定義圖片的每個(gè)圖片以及至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽，將至少一個(gè)自定義圖片、至少一個(gè)自定義表格對應(yīng)的唯一canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，實(shí)現(xiàn)了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網(wǎng)頁內(nèi)容。最后，通過優(yōu)先級處理以及圖像處理技術(shù)，在網(wǎng)頁中顯示基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的內(nèi)容，實(shí)現(xiàn)了在網(wǎng)頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內(nèi)容顯示。本發(fā)明實(shí)施例最終達(dá)到了豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

附圖說明

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

圖1為本發(fā)明實(shí)施例的一種網(wǎng)頁顯示方法流程圖；

圖2為本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的基礎(chǔ)canvas畫布的一種畫圖方法流程圖；

圖3為本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種自定義內(nèi)容添加canvas標(biāo)簽的方法流程圖；

圖4為本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種目標(biāo)圖像合成方法流程圖；

圖5為本發(fā)明實(shí)施例的一種網(wǎng)頁顯示裝置示意圖；

圖6為本發(fā)明實(shí)施例的一種電子設(shè)備示意圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例公開了一種網(wǎng)頁顯示方法，如圖1所示。圖1為本發(fā)明實(shí)施例的一種網(wǎng)頁顯示方法流程圖，包括：

s101，在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫。

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

在本發(fā)明實(shí)施例中，要在html頁面中使用canvas元素實(shí)現(xiàn)畫圖功能，首先在html頁面中創(chuàng)建一個(gè)空的canvas畫布，設(shè)置該空canvas畫布的屬性，在該空畫布上用戶進(jìn)行繪畫。

具體為，在html頁面的canvas元素下創(chuàng)建一個(gè)新的空canvas畫布，作為本發(fā)明實(shí)施例的基礎(chǔ)canvas畫布。設(shè)置該基礎(chǔ)canvas畫布的基本屬性，包括畫布尺寸、畫布背景、線條顏色。線條粗細(xì)等。在該基礎(chǔ)canvas畫布上設(shè)置檢測用戶操作的函數(shù)，當(dāng)檢測到用戶具體操作后，按照該基礎(chǔ)canvas畫布的定義的繪畫方式，將對應(yīng)于用戶操作的繪畫添加到該基礎(chǔ)canvas畫布上。

s102，確定至少一個(gè)待添加自定義內(nèi)容，給至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格。

在上述基礎(chǔ)canvas畫布上完成用戶繪畫后，為了豐富網(wǎng)頁的展示效果，可添加用戶自定義的其他內(nèi)容。

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

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

需要說明的是，其他自定義形式的內(nèi)容通過添加canvas標(biāo)簽，將地址對應(yīng)鏈接到html頁面上的方式都屬于本發(fā)明實(shí)施例的保護(hù)范圍，在此不再贅述。

s103，通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示目標(biāo)圖像。

在上述給所有自定義的內(nèi)容添加了canvas標(biāo)簽后，存在所有canvas標(biāo)簽對應(yīng)內(nèi)容的顯示層級問題。在本發(fā)明實(shí)話實(shí)例中，通過圖層顯示優(yōu)先級處理為不同canvas標(biāo)簽設(shè)置不同的圖層優(yōu)先級，以使將canvas標(biāo)簽對應(yīng)的內(nèi)容按照該設(shè)置的圖層優(yōu)先級顯示。

具體地，確定所有canvas標(biāo)簽對應(yīng)內(nèi)容的圖層顯示優(yōu)先級。通過圖像處理技術(shù)，將確定好圖層顯示的基礎(chǔ)canvas畫布中用戶繪畫以及自定義內(nèi)容合成目標(biāo)圖像。通過圖像顯示技術(shù)，顯示該目標(biāo)圖像對應(yīng)的基礎(chǔ)canvas畫布中用戶繪畫以及img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容。

本發(fā)明實(shí)施例提供了一種網(wǎng)頁顯示方法，具體為在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫，實(shí)現(xiàn)了用戶基本繪畫操作。另外，通過確定至少一個(gè)自定義圖片、至少一個(gè)自定義表格，給至少一個(gè)自定義圖片的每個(gè)圖片以及至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽，將至少一個(gè)自定義圖片、至少一個(gè)自定義表格對應(yīng)的唯一canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，實(shí)現(xiàn)了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網(wǎng)頁內(nèi)容。最后，通過優(yōu)先級處理以及圖像處理技術(shù)，在網(wǎng)頁中顯示基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的內(nèi)容，實(shí)現(xiàn)了在網(wǎng)頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內(nèi)容顯示。本發(fā)明實(shí)施例最終達(dá)到了豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

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

s201，在html頁面的img標(biāo)簽中添加基礎(chǔ)canvas畫布標(biāo)簽，在基礎(chǔ)canvas畫布標(biāo)簽中確定基礎(chǔ)canvas畫布。

具體地，在html頁面中先確定基礎(chǔ)canvas畫布的結(jié)構(gòu)。該結(jié)構(gòu)相對來說比較簡單，只需在img標(biāo)簽下創(chuàng)建一個(gè)canvas標(biāo)簽即可，將canvas標(biāo)簽對應(yīng)的canvas畫布確定為基礎(chǔ)canvas畫布。

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

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

s203，在基礎(chǔ)canvas畫布中添加觸發(fā)事件操作函數(shù)。

在上述完成用戶當(dāng)前操作的基礎(chǔ)canvas畫布對應(yīng)的基本屬性后，在該canvas畫布中添加檢測用戶操作的觸發(fā)事件操作函數(shù)，以使該基礎(chǔ)canvas畫布檢測到用戶的操作，并將用戶對應(yīng)的繪畫操作添加到該基礎(chǔ)canvas畫布上。

例如，在上述完成用戶當(dāng)前操作的基礎(chǔ)canvas畫布對應(yīng)的基本屬性后，可編寫click和touch操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作。

s204，通過觸發(fā)事件操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作，在基礎(chǔ)canvas畫布中添加當(dāng)前用戶的用戶繪畫。

在上述添加的觸發(fā)事件操作函數(shù)，檢測到當(dāng)前用戶的用戶繪畫操作后，在該基礎(chǔ)canvas畫布中添加當(dāng)前用戶的用戶繪畫。

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

通過觸發(fā)事件操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作，通過上述函數(shù)用戶可在基礎(chǔ)canvas畫布中完成當(dāng)前繪畫。

可見，通過本發(fā)明實(shí)施例，可實(shí)現(xiàn)在基礎(chǔ)canvas畫布中按照用戶操作完成基本繪畫。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種實(shí)施例中，確定至少一個(gè)待添加自定義內(nèi)容，給至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，如圖3所示。圖3為本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種自定義內(nèi)容添加canvas標(biāo)簽的方法流程圖，包括：

s301，通過調(diào)整至少一個(gè)圖片的透明度效果，將至少一個(gè)圖片作為添加到基礎(chǔ)canvas畫布中的至少一個(gè)背景圖片。

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

s302，通過調(diào)整至少一個(gè)圖片的尺寸大小小于預(yù)設(shè)尺寸大小，形成至少一個(gè)圖標(biāo)圖片。

在本發(fā)明實(shí)施例中，為添加到基礎(chǔ)canvas畫布的圖片設(shè)置圖片的固定長度和固定寬度，將該固定長度定義為預(yù)設(shè)長度以及將該固定寬度定義為預(yù)設(shè)寬度，將該預(yù)設(shè)長度以及預(yù)設(shè)寬度確定的尺寸大小定義為本發(fā)明實(shí)施例的預(yù)設(shè)尺寸。

調(diào)整已有的至少一個(gè)圖片尺寸大小小于預(yù)設(shè)尺寸，形成至少一個(gè)圖標(biāo)圖片。具體地，可調(diào)整所有已有圖片尺寸大小為小于預(yù)設(shè)尺寸統(tǒng)一大小的圖片，形成至少一個(gè)圖標(biāo)圖片?？烧{(diào)整所有已有圖片的寬度小于預(yù)設(shè)寬度，形成至少一個(gè)圖標(biāo)圖片。可調(diào)整所有已有圖片的長度小于預(yù)設(shè)長度，形成至少一個(gè)圖標(biāo)圖片。另外，還可調(diào)整所有已有圖片中部分圖片的寬度小于預(yù)設(shè)寬度，部分圖片的長度小于預(yù)設(shè)長度，形成至少一個(gè)圖標(biāo)圖片。

s303，按照預(yù)設(shè)周期調(diào)整至少一個(gè)圖片的顯示尺寸，形成至少一個(gè)動態(tài)顯示圖片。

在本發(fā)明實(shí)施例中，為增加圖片顯示的多樣性，可增加動態(tài)顯示圖片。即為調(diào)整每張圖片在不同時(shí)間段內(nèi)顯示不同的尺寸大小，實(shí)現(xiàn)周期動態(tài)顯示的效果。在本發(fā)明實(shí)施例中，將該周期定義為預(yù)設(shè)周期。

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

需要說明的是，按照預(yù)設(shè)周期調(diào)整至少一個(gè)圖片的顯示尺寸，形成至少一個(gè)動態(tài)顯示圖片的任一種實(shí)現(xiàn)方式，都屬于本發(fā)明實(shí)施例的保護(hù)范圍，在此不再一一贅述。

s304，將至少一個(gè)背景圖片、至少一個(gè)圖標(biāo)圖片以及至少一個(gè)動態(tài)顯示圖片，確定為至少一個(gè)自定義圖片，給至少一個(gè)自定義圖片的每個(gè)圖片添加唯一的canvas標(biāo)簽。

具體地，將上述至少一個(gè)背景圖片、至少一個(gè)圖標(biāo)圖片以及至少一個(gè)動態(tài)顯示圖片，定義為本發(fā)明實(shí)施例的至少一個(gè)自定義圖片。在html頁面的canvas元素中為每個(gè)自定義圖片對應(yīng)添加唯一的canvas標(biāo)簽。將所有的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中。

s305，通過自定義函數(shù)確定至少一個(gè)自定義表格，給至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽。

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

具體為提前自定義好自定義函數(shù)，通過該自定義函數(shù)確定至少一個(gè)自定義表格。將在html頁面的canvas元素中為每個(gè)自定義表格對應(yīng)添加唯一的canvas標(biāo)簽。將所有的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中。

可見，通過本發(fā)明實(shí)施例將更多自定義內(nèi)容添加在canvas元素中，將在canvas元素中對應(yīng)添加的自定義內(nèi)容添加到html頁面中，實(shí)現(xiàn)html頁面的多元化，豐富html頁面的顯示。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種實(shí)施例中，通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示目標(biāo)圖像，如圖4所示。圖4為本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種目標(biāo)圖像合成方法流程圖，包括：

s401，通過圖像處理技術(shù)，確定img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置。

在本發(fā)明實(shí)施例中，通過設(shè)置top和left的值來確定img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置。

具體為，確定img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的至少一個(gè)自定義表格的顯示位置；確定img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的至少一個(gè)背景圖片的顯示位置；確定img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的至少一個(gè)圖標(biāo)圖片的顯示位置；確定img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的至少一個(gè)動態(tài)顯示圖片的顯示位置。其中，至少一個(gè)自定義表格的顯示位置、至少一個(gè)圖標(biāo)圖片的顯示位置、至少一個(gè)動態(tài)顯示圖片的顯示位置中、至少一個(gè)背景圖片的顯示位置，其中，至少一個(gè)自定義表格的顯示位置、至少一個(gè)圖標(biāo)圖片的顯示位置、至少一個(gè)動態(tài)顯示圖片的顯示位置中兩兩顯示位置不重合。

s402，通過圖層顯示優(yōu)先級處理，確定每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層顯示優(yōu)先級。

在img標(biāo)簽中隱藏的所有canvas標(biāo)簽對應(yīng)的內(nèi)容在顯示時(shí)候可能會出現(xiàn)重疊現(xiàn)象，因此需要對每個(gè)canvas標(biāo)簽對應(yīng)的內(nèi)容的圖層設(shè)置優(yōu)先級，在本發(fā)明實(shí)施例中將每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層設(shè)置優(yōu)先級的方式，定義為圖層顯示優(yōu)先級處理。

具體地，在上述通過圖像處理技術(shù)，確定img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置后，通過圖層顯示優(yōu)先級處理，可設(shè)置canvas標(biāo)簽中zindex的值，為每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層設(shè)置顯示的優(yōu)先級。

例如，可按照數(shù)字從小到大的順序，對應(yīng)設(shè)置至少一個(gè)自定義內(nèi)容的由低到高的優(yōu)先級先后順序。可將自定義圖片中的至少一個(gè)背景圖片的優(yōu)先級設(shè)為最低優(yōu)先級；將自定義圖片中的至少一個(gè)圖標(biāo)圖片的優(yōu)先級設(shè)為略高于至少一個(gè)背景圖片的優(yōu)先級；將自定義圖片中的至少一個(gè)動態(tài)圖片的優(yōu)先級設(shè)為略高于至少一個(gè)圖標(biāo)圖片的優(yōu)先級；將至少一個(gè)表格的優(yōu)先級設(shè)為與自定義圖片中的至少一個(gè)動態(tài)圖片的優(yōu)先級同級。將基礎(chǔ)canvas畫布上添加的當(dāng)前用戶的用戶繪畫的優(yōu)先級設(shè)為最高優(yōu)先級。

需要說明的是，上述通過圖層顯示優(yōu)先級處理為canvas標(biāo)簽對應(yīng)內(nèi)容設(shè)置的圖層優(yōu)先級僅為顯示的一種優(yōu)先級，其他按照該方法為canvas標(biāo)簽對應(yīng)的內(nèi)容設(shè)置優(yōu)先級的方式也是可取的，都屬于本發(fā)明實(shí)施例的保護(hù)范圍。

s403，通過圖像合成技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容，按照顯示位置以及圖層顯示優(yōu)先級順序，合成目標(biāo)圖像。

具體地，按照上述圖像處理技術(shù)，確定img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置，以及通過圖層顯示優(yōu)先級處理，確定每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層顯示優(yōu)先級后，通過圖像合成技術(shù)，按照上述確定好的位置以及圖層優(yōu)先級，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像。

s404，通過圖像編碼技術(shù)以及圖像顯示技術(shù)，在網(wǎng)頁中顯示目標(biāo)圖像。

在上述通過圖像合成技術(shù)合成目標(biāo)圖像后，通過圖像編碼技術(shù)以及圖像顯示技術(shù)，在網(wǎng)頁中顯示目標(biāo)圖像。

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

可見，通過本發(fā)明實(shí)施例的網(wǎng)頁顯示方法的一種目標(biāo)圖像合成方法，可實(shí)現(xiàn)將canvas元素中的用戶繪畫以及canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示該目標(biāo)圖像，最終豐富了html頁面的顯示，以及根據(jù)不同用戶添加的不同的自定義內(nèi)容，以及設(shè)置所有canvas標(biāo)簽對應(yīng)內(nèi)容的不同優(yōu)先級，實(shí)現(xiàn)了用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例還公開了一種網(wǎng)頁顯示裝置，如圖5所示。圖5為本發(fā)明實(shí)施例的一種網(wǎng)頁顯示裝置示意圖，包括：

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

自定義模塊502，用于確定至少一個(gè)待添加自定義內(nèi)容，給至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格。

顯示模塊503，用于通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示目標(biāo)圖像。

本發(fā)明實(shí)施例提供了一種網(wǎng)頁顯示裝置，具體為在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫，實(shí)現(xiàn)了用戶基本繪畫操作。另外，通過確定至少一個(gè)自定義圖片、至少一個(gè)自定義表格，給至少一個(gè)自定義圖片的每個(gè)圖片以及至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽，將至少一個(gè)自定義圖片、至少一個(gè)自定義表格對應(yīng)的唯一canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，實(shí)現(xiàn)了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網(wǎng)頁內(nèi)容。最后，通過優(yōu)先級處理以及圖像處理技術(shù)，在網(wǎng)頁中顯示基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的內(nèi)容，實(shí)現(xiàn)了在網(wǎng)頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內(nèi)容顯示。本發(fā)明實(shí)施例最終達(dá)到了豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

需要說明的是，本發(fā)明實(shí)施例的裝置是應(yīng)用上述一種網(wǎng)頁顯示方法的裝置，則上述網(wǎng)頁顯示方法的所有實(shí)施例均適用于該裝置，且均能達(dá)到相同或相似的有益效果。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示裝置的一種實(shí)施例中，繪畫模塊501，包括：

確定子模塊，用于在html頁面的img標(biāo)簽中添加基礎(chǔ)canvas畫布標(biāo)簽，在基礎(chǔ)canvas畫布標(biāo)簽中確定基礎(chǔ)canvas畫布。

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

添加子模塊，用于在基礎(chǔ)canvas畫布中添加觸發(fā)事件操作函數(shù)。

繪畫子模塊，用于通過觸發(fā)事件操作函數(shù)，檢測當(dāng)前用戶的用戶繪畫操作，在基礎(chǔ)canvas畫布中添加當(dāng)前用戶的用戶繪畫。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示裝置的一種實(shí)施例中，自定義模塊502，包括：

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

圖標(biāo)圖片確定子模塊，用于通過調(diào)整至少一個(gè)圖片的尺寸大小小于預(yù)設(shè)尺寸大小，形成至少一個(gè)圖標(biāo)圖片。

動態(tài)圖片確定子模塊，用于按照預(yù)設(shè)周期調(diào)整至少一個(gè)圖片的顯示尺寸，形成至少一個(gè)動態(tài)顯示圖片。

自定義圖片子模塊，用于將至少一個(gè)背景圖片、至少一個(gè)圖標(biāo)圖片以及至少一個(gè)動態(tài)顯示圖片，確定為至少一個(gè)自定義圖片，給至少一個(gè)自定義圖片的每個(gè)圖片添加唯一的canvas標(biāo)簽。

自定義表格子模塊，用于通過自定義函數(shù)確定至少一個(gè)自定義表格，給至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示裝置的一種實(shí)施例中，顯示模塊503，包括：

顯示位置確定子模塊，用于通過圖像處理技術(shù)，確定img標(biāo)簽中隱藏的每個(gè)canvas標(biāo)簽對應(yīng)的自定義內(nèi)容的顯示位置。

優(yōu)先級確定子模塊，用于通過圖層顯示優(yōu)先級處理，確定每個(gè)canvas標(biāo)簽對應(yīng)內(nèi)容的圖層顯示優(yōu)先級。

圖像合成子模塊，用于通過圖像合成技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容，按照顯示位置以及圖層顯示優(yōu)先級順序，合成目標(biāo)圖像。

顯示子模塊，用于通過圖像編碼技術(shù)以及圖像顯示技術(shù)，在網(wǎng)頁中顯示目標(biāo)圖像。

可選地，在本發(fā)明實(shí)施例的網(wǎng)頁顯示裝置的一種實(shí)施例中，自定義內(nèi)容的顯示位置包括：至少一個(gè)自定義表格的顯示位置、至少一個(gè)圖標(biāo)圖片的顯示位置、至少一個(gè)動態(tài)顯示圖片的顯示位置中、至少一個(gè)背景圖片的顯示位置，其中，至少一個(gè)自定義表格的顯示位置、至少一個(gè)圖標(biāo)圖片的顯示位置、至少一個(gè)動態(tài)顯示圖片的顯示位置中兩兩顯示位置不重合。

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

存儲器603，用于存放計(jì)算機(jī)程序；

處理器601，用于執(zhí)行存儲器603上所存放的程序時(shí)，實(shí)現(xiàn)如下步驟：

在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫；

確定至少一個(gè)待添加自定義內(nèi)容，給至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格；

通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示目標(biāo)圖像。

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

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

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

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

本發(fā)明實(shí)施例提供了一種電子設(shè)備，具體為在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫，實(shí)現(xiàn)了用戶基本繪畫操作。另外，通過確定至少一個(gè)自定義圖片、至少一個(gè)自定義表格，給至少一個(gè)自定義圖片的每個(gè)圖片以及至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽，將至少一個(gè)自定義圖片、至少一個(gè)自定義表格對應(yīng)的唯一canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，實(shí)現(xiàn)了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網(wǎng)頁內(nèi)容。最后，通過優(yōu)先級處理以及圖像處理技術(shù)，在網(wǎng)頁中顯示基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的內(nèi)容，實(shí)現(xiàn)了在網(wǎng)頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內(nèi)容顯示。本發(fā)明實(shí)施例最終達(dá)到了豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

為達(dá)到上述發(fā)明目的，本發(fā)明實(shí)施例還公開了一種計(jì)算機(jī)可讀存儲介質(zhì)，計(jì)算機(jī)可讀存儲介質(zhì)內(nèi)存儲有計(jì)算機(jī)程序，計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)如下步驟：

在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫；

確定至少一個(gè)待添加自定義內(nèi)容，給至少一個(gè)待添加自定義內(nèi)容添加唯一的canvas標(biāo)簽，將至少一個(gè)待添加自定義內(nèi)容對應(yīng)的canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，其中，待添加自定義內(nèi)容至少包括：自定義圖片、自定義表格；

通過圖層顯示優(yōu)先級處理以及圖像處理技術(shù)，將基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)自定義內(nèi)容合成目標(biāo)圖像，在網(wǎng)頁中顯示目標(biāo)圖像。

本發(fā)明實(shí)施例提供了一種計(jì)算機(jī)可讀存儲介質(zhì)，具體為在超文本標(biāo)記語言html頁面中，確定基礎(chǔ)canvas畫布，在基礎(chǔ)canvas畫布中添加用戶繪畫，實(shí)現(xiàn)了用戶基本繪畫操作。另外，通過確定至少一個(gè)自定義圖片、至少一個(gè)自定義表格，給至少一個(gè)自定義圖片的每個(gè)圖片以及至少一個(gè)自定義表格的每個(gè)表格添加唯一的canvas標(biāo)簽，將至少一個(gè)自定義圖片、至少一個(gè)自定義表格對應(yīng)的唯一canvas標(biāo)簽隱藏在html頁面的img標(biāo)簽中，實(shí)現(xiàn)了用戶在canvas畫布中添加自定義圖片以及自定義表格，豐富網(wǎng)頁內(nèi)容。最后，通過優(yōu)先級處理以及圖像處理技術(shù)，在網(wǎng)頁中顯示基礎(chǔ)canvas畫布中用戶繪畫以及基礎(chǔ)canvas畫布中img標(biāo)簽中隱藏的canvas標(biāo)簽對應(yīng)的內(nèi)容，實(shí)現(xiàn)了在網(wǎng)頁上按照用戶繪畫以及添加的自定義圖片、自定義表格的內(nèi)容顯示。本發(fā)明實(shí)施例最終達(dá)到了豐富網(wǎng)頁顯示以及實(shí)現(xiàn)用戶個(gè)性化內(nèi)容的網(wǎng)頁顯示效果。

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

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

以上僅為本發(fā)明的較佳實(shí)施例而已，并非用于限定本發(fā)明的保護(hù)范圍。凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換、改進(jìn)等，均包含在本發(fā)明的保護(hù)范圍內(nèi)。