CN107239287A - 一种网页显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例提供了一种网页显示方法、装置、电子设备及存储介质，其中方法包括：在超文本标记语言HTML页面中，确定基础canvas画布，在基础canvas画布中添加用户绘画；确定至少一个待添加自定义内容，给至少一个待添加自定义内容添加唯一的canvas标签，将至少一个待添加自定义内容对应的canvas标签隐藏在HTML页面的img标签中；通过图层显示优先级处理以及图像处理技术，将基础canvas画布中用户绘画以及基础canvas画布中img标签中隐藏的canvas标签对应自定义内容合成目标图像，在网页中显示目标图像。本发明实施例最终实现了丰富网页显示以及实现用户个性化内容的网页显示效果。

Description

一种网页显示方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页显示方法、装置、电子设备及存储介质。

背景技术

随着互联网信息技术的快速发展，对于网页的设计更加炫酷，也更加多样化。网页多样化主要体现在对图片的设计上。现有技术中如果想显示图片，或者网页绚丽的效果的话，往往都是引入图片地址或者以背景图的方式实现。在HTML 5(Hyper Text Mark-upLanguage 5，超文本标记语言第5版)以后，引入了canvas元素(canvas元素用于在网页上绘制图形)，开发者可以使用canvas构建网页显示效果。

现有技术中使用canvas构建网页显示效果具体如下：首先创建一个空的画布，可以使用set Bitmap()方法来创建画布。设置该画布的背景色、显示区域等属性信息。使用Canvas(Bitmap bitmap)函数将已拟定好的某一个柱状图、线形图、饼状图、表格以及一些简单的线条绘制在bitmap，并将绘制完成的内容添加在空画布上，即可完成一个简单的画图。将完成的画图添加到网页上，显示使用HTML 5的canvas元素完成的画图。

现有技术中canvas的运用不算广泛，使用HTML 5的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(Document Object Model，文档对象模型)一样它有自己本身的属性、方法和事件，其中就有绘图的方法。在矩形区域的画布上，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可以是外设部件互连标准(PeripheralComponent Interconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线604可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口602用于上述电子设备与其他设备之间的通信。

存储器603可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器603还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器603可以是通用处理器，包括中央处理器(Central ProcessingUnit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(DigitalSignal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，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标签对应的内容，实现了在网页上按照用户绘画以及添加的自定义图片、自定义表格的内容显示。本发明实施例最终达到了丰富网页显示以及实现用户个性化内容的网页显示效果。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备及计算机可读存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种网页显示方法，其特征在于，包括：

在超文本标记语言HTML页面中，确定基础canvas画布，在所述基础canvas画布中添加用户绘画；

确定至少一个待添加自定义内容，给所述至少一个待添加自定义内容添加唯一的canvas标签，将所述至少一个待添加自定义内容对应的canvas标签隐藏在HTML页面的img标签中，其中，所述待添加自定义内容至少包括：自定义图片、自定义表格；

通过图层显示优先级处理以及图像处理技术，将所述基础canvas画布中用户绘画以及所述基础canvas画布中所述img标签中隐藏的canvas标签对应自定义内容合成目标图像，在网页中显示所述目标图像。

2.根据权利要求1所述的方法，其特征在于，所述在超文本标记语言HTML页面中，确定基础canvas画布，在所述基础canvas画布中添加用户绘画，包括：

在所述HTML页面的img标签中添加基础canvas画布标签，在所述基础canvas画布标签中确定基础canvas画布；

通过JavaScript确定所述基础canvas画布的基本属性，所述基本属性包括：起始位置、颜色、弧度；

在所述基础canvas画布中添加触发事件操作函数；

通过所述触发事件操作函数，检测当前用户的用户绘画操作，在所述基础canvas画布中添加所述当前用户的用户绘画。

3.根据权利要求1所述的方法，其特征在于，所述确定至少一个待添加自定义内容，给所述至少一个待添加自定义内容添加唯一的canvas标签，将所述至少一个待添加自定义内容对应的canvas标签隐藏在HTML页面的img标签中，包括：

通过调整至少一个图片的透明度效果，将所述至少一个图片作为添加到所述基础canvas画布中的至少一个背景图片；

通过调整至少一个图片的尺寸大小小于预设尺寸大小，形成至少一个图标图片；

按照预设周期调整至少一个图片的显示尺寸，形成至少一个动态显示图片；

将所述至少一个背景图片、至少一个图标图片以及至少一个动态显示图片，确定为至少一个自定义图片，给所述至少一个自定义图片的每个图片添加唯一的canvas标签；

通过自定义函数确定至少一个自定义表格，给所述至少一个自定义表格的每个表格添加唯一的canvas标签。

4.根据权利要求1至3任一项所述的方法，其特征在于，所述通过图层显示优先级处理以及图像处理技术，将所述基础canvas画布中用户绘画以及所述基础canvas画布中所述img标签中隐藏的canvas标签对应自定义内容合成目标图像，在网页中显示所述目标图像，包括：

通过图像处理技术，确定所述img标签中隐藏的每个canvas标签对应的自定义内容的显示位置；

通过图层显示优先级处理，确定每个canvas标签对应内容的图层显示优先级；

通过图像合成技术，将所述基础canvas画布中用户绘画以及所述基础canvas画布中所述img标签中隐藏的canvas标签对应自定义内容，按照显示位置以及图层显示优先级顺序，合成所述目标图像；

通过图像编码技术以及图像显示技术，在网页中显示所述目标图像。

5.根据权利要求4所述的方法，其特征在于，所述自定义内容的显示位置包括：至少一个自定义表格的显示位置、至少一个图标图片的显示位置、至少一个动态显示图片的显示位置中、至少一个背景图片的显示位置，其中，所述至少一个自定义表格的显示位置、所述至少一个图标图片的显示位置、所述至少一个动态显示图片的显示位置中两两显示位置不重合。

6.一种网页显示装置，其特征在于，包括：

绘画模块，用于在超文本标记语言HTML页面中，确定基础canvas画布，在所述基础canvas画布中添加用户绘画；

自定义模块，用于确定至少一个待添加自定义内容，给所述至少一个待添加自定义内容添加唯一的canvas标签，将所述至少一个待添加自定义内容对应的canvas标签隐藏在HTML页面的img标签中，其中，所述待添加自定义内容至少包括：自定义图片、自定义表格；

显示模块，用于通过图层显示优先级处理以及图像处理技术，将所述基础canvas画布中用户绘画以及所述基础canvas画布中所述img标签中隐藏的canvas标签对应自定义内容合成目标图像，在网页中显示所述目标图像。

7.根据权利要求6所述的装置，其特征在于，所述绘画模块，包括：

确定子模块，用于在所述HTML页面的img标签中添加基础canvas画布标签，在所述基础canvas画布标签中确定基础canvas画布；

属性确定子模块，用于通过JavaScript确定基础canvas画布的基本属性，所述基本属性包括：起始位置、颜色、弧度参数；

添加子模块，用于在所述基础canvas画布中添加触发事件操作函数；

绘画子模块，用于通过所述触发事件操作函数，检测当前用户的用户绘画操作，在所述基础canvas画布中添加所述当前用户的用户绘画。

8.根据权利要求6所述的装置，其特征在于，所述自定义模块，包括：

背景图片确定子模块，用于通过调整至少一个图片的透明度效果，将所述至少一个图片作为添加到所述基础canvas画布中的至少一个背景图片；

图标图片确定子模块，用于通过调整至少一个图片的尺寸大小小于预设尺寸大小，形成至少一个图标图片；

动态图片确定子模块，用于按照预设周期调整至少一个图片的显示尺寸，形成至少一个动态显示图片；

自定义图片子模块，用于将所述至少一个背景图片、至少一个图标图片以及至少一个动态显示图片，确定为至少一个自定义图片，给所述至少一个自定义图片的每个图片添加唯一的canvas标签；

自定义表格子模块，用于通过自定义函数确定至少一个自定义表格，给所述至少一个自定义表格的每个表格添加唯一的canvas标签。

9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；

所述存储器，用于存放计算机程序；

所述处理器，用于执行所述存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-5任一所述的方法步骤。