CN109918604A - 网页绘图方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种网页绘图方法、装置、设备及存储介质。该方法包括：根据绘图任务创建具有类HTML节点特性的画布组件；根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。本发明实施例提供的网页绘图方法，通过创建具有类HTML节点特性的画布组件，在实现包含预设事件绑定信息的特殊绘图时，根据被触发的预设事件绑定信息确认被执行的画布组件对应的组件类型和组件属性，最后进行被执行的画布组件的图像渲染，相比于现有技术采用JS API实现网页绘图，降低网页绘图的难度的同时，降低绘图者的工作量和调试难度。

Description

网页绘图方法、装置、设备及存储介质

技术领域

本发明实施例涉及计算机应用技术领域，尤其涉及一种网页绘图方法、装置、设备及存储介质。

背景技术

HTML Canvas(画布)是在HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，是一个可以用JavaScript(以下简称JS)操作的位图(bitmap)。Canvas对象表示一个HTML画布元素<canvas>，其定义了一个API支持脚本化客户端绘图操作。目前被大量运用于大数据分析的图表绘制、3D图形/游戏的绘制中。

现有技术中，在利用Canvas绘图时，通常是逐一执行JS API，通过输入图形坐标序列进行图形绘制。目前，行业内存在很多Canvas绘制库、3D图形绘制库，如pixiJS,ThreeJS，提供了语义化的API，尽可能的方便绘图者轻松绘图。采用上述方案绘图时，即使是绘制简单的图形，也需要编辑多条JS API来实现，对绘图者的理解能力及记忆力都有考验，若在面对图形复杂化、工程化、强交互、甚至作为互动游戏等需求下(如添加事件绑定信息)，绘图者的工作量和调试难度逐渐上升，难以维护和调试。

发明内容

本发明实施例提供一种网页绘图方法、装置、设备及存储介质，可以降低网页绘图的难度，降低绘图者的工作量和调试难度。

第一方面，本发明实施例提供了一种网页绘图方法，其特征在于，包括：

根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；

根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

进一步地，所述根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染，包括：

根据所述组件类型调用对应的应用程序接口API；

根据所述组件属性更新所述API中的属性值；

根据更新后的API执行画布组件，以进行图像渲染。

进一步地，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性之前，还包括：

将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听；

接收事件监听中心发送的检测到预设事件被触发的信息。

进一步地，所述预设事件绑定信息包括鼠标绑定事件信息，所述鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；

相应的，将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听，包括：

将所述鼠标绑定事件信息发送至鼠标监听中心，以对鼠标绑定事件进行监听。

进一步地，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：

当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改；

若是，则返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作；

若不是，则返回执行根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性的操作。

进一步地，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：

当检测到画布组件被删除时，返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作。

进一步地，根据绘图任务创建具有类HTML节点特性的画布组件，包括：

获取绘图任务对应的具有类HTML节点特性的数据；

对所述数据进行解析，根据解析结果创建具有类HTML节点特性的画布组件。

进一步地，所述类HTML节点特性包括：节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点***特性及节点删除特性。

进一步地，在获取绘图任务对应的具有类HTML节点特性的数据之前，还包括：

根据所述类HTML节点特性对对绘图任务对应的原始数据进行特性转换。

第二方面，本发明实施例还提供了一种网页绘图装置，该装置包括：

画布组件创建模块，用于根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；

组件类型和组件属性确定模块，用于根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

图像渲染模块，用于根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

第三方面，本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如本发明实施例所述的网页绘图方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例所述的网页绘图方法。

本发明实施例，首先根据绘图任务创建具有类HTML节点特性的画布组件，画布组件包括组件类型和组件属性，然后根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性，最后根据组件类型和组件属性进行被执行的画布组件的图像渲染。本发明实施例提供的网页绘图方法，通过创建具有类HTML节点特性的画布组件，在实现包含预设事件绑定信息的特殊绘图时，根据被触发的预设事件绑定信息确认被执行的画布组件对应的组件类型和组件属性，最后进行被执行的画布组件的图像渲染，相比于现有技术采用JS API实现网页绘图，降低网页绘图的难度的同时，迎合了用户熟悉HTML操作的习惯，降低绘图者的工作量和调试难度。

附图说明

图1是本发明实施例一中的一种网页绘图方法的流程图；

图2是本发明实施例二中的一种网页绘图方法的流程图；

图3是本发明实施例二中的基于所述网页绘图方法绘制的三维图；

图4是本发明实施例三中的一种网页绘图装置的结构示意图；

图5是本发明实施例四中的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一提供的一种网页绘图方法的流程图，本实施例可适用于在HTML5页面中的Canvas画布中实现网页绘图的情况，该方法可以由网页绘图装置来执行，该装置可由硬件和/或软件组成，并一般可集成在具有网页绘图功能的设备中，该设备可以是服务器、终端或服务器集群等电子设备。如图1所示，该方法具体包括如下步骤：

步骤110，根据绘图任务创建具有类HTML节点特性的画布组件。

其中，类HTML节点特性可以是类似于HTML节点特性的特性。画布组件包括组件类型和组件属性。组件类型可以表征画布组件对应的图形信息，组件属性可以包括画布组件对应的图形的参数。示例性的，假设画布组件对应的图形为圆，则组件类型的表现形式为“Circle”，组件属性可以包括该圆的圆心位置、半径、填充颜色。绘图任务可以包括画布的起始位置坐标、图像中包含的图形、各图形之间的位置关系以及各图像的位置、填充颜色等信息。

类HTML节点特性可以包括节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点***特性及节点删除特性。表1中介绍了一实施例中画布组件的各个类HTML节点特性的具体内容。

表1

从表1中可以看出，本实施例中，将画布组件按照HTML节点特性进行特性转换，使得画布组件具有类HTML节点特性。

具体的，根据绘图任务创建具有类HTML节点特性的画布组件，可通过下述方式实施：获取绘图任务对应的具有类HTML节点特性的数据；对数据进行解析，根据解析结果创建具有类HTML节点特性的画布组件。

其中，类HTML节点特性的数据可以以组件树的形式体现，其中包含父组件、子组件及叶子组件等。具体的，绘图者根据绘图任务编写具有类HTML节点特性的组件树，并将组件树输入至服务器中，服务器按照树的遍历算法对组件树进行解析，并根据解析结果创建一系列具有类HTML节点特性的画布组件。示例性的，以绘制绿色圆形为例，绘图者编写出的具有类HTML节点特性的数据如下所示：

在上述例子中，采用树的遍历算法解析后，可以创建三个画布组件，分别为<CanvasContext></CanvasContext>父组件、<Layout position＝“[75,75]”></Layout>子组件和<Circle r＝“60”angleRange＝“[0,2]”fill＝“green”stroke＝“1”></Circle>叶子组件。

可选的，在获取绘图任务对应的具有类HTML节点特性的数据之前，还包括如下步骤：根据类HTML节点特性对绘图任务对应的原始数据进行特性转换。

其中，原始数据可以采用JS语言编写的数据，具体的，按照表1中示出的类HTML节点特性进行特性转化。

步骤120，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性。

其中，预设事件可以包括鼠标事件和键盘事件等。鼠标事件包括单击、鼠标按下、鼠标抬起、鼠标移入和鼠标移出等事件；键盘事件包括按键按下、按键抬起和按键按下抬起等事件。预设事件绑定信息可以是检测到预设的鼠标事件或键盘事件后，执行与预设事件绑定的操作的信息。例如：鼠标点击事件绑定的信息是点击图形时，该图形颜色由黄色变为绿色，则当检测到鼠标点击该图形的事件时，图形的颜色由绿色变为黄色。本实施例中，画布组件中添加了预设时间绑定信息时，服务器将预设事件绑定信息发送至事件监听中心，监听中心对预设事件进行监听，当监听到预设事件被触发时，监听中心将预设事件被触发的信息发送至服务器，服务器接收到监听中心发送的信息后，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性，即确认当前被执行的画布组件对应的图形信息以及图形的参数。

本实施例中，预设事件绑定信息为鼠标绑定事件信息。鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形(onMouseEnter)、鼠标移出当前画布组件对应的图形(onMouseOut)、鼠标点击当前画布组件对应的图形(onClick)、鼠标长按当前画布组件对应的图形(onMouseDown)及鼠标长按当前画布组件对应的图形后抬起(onMouseUp)。具体的，画布组件中添加了鼠标绑定事件信息时，服务器将鼠标绑定事件信息发送至事件监听中心，监听中心对鼠标事件进行监听，当监听到鼠标事件被触发时，监听中心将鼠标事件被触发的信息发送至服务器，服务器接收到监听中心发送的信息后，根据被触发的鼠标事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性，即确认当前被执行的画布组件对应的图形信息以及图形的参数。示例性的，在上述绘制的绿色圆的基础上，在“圆”对应的组件上添加“鼠标浮在圆上换色”的鼠标绑定事件信息，绘图者编写出的具有类HTML节点特性的数据如下所示:

在上述例子中，当检测到鼠标悬浮于圆上时，获取圆对应的画布组件的画布类型及画布属性，画布类型为Circle，画布属性为r＝“60”angleRange＝“[0,2]”stroke＝“1”fill＝“green”，实现当鼠标浮在圆上时圆的颜色从黄色换为绿色。

本实施例中，预设事件绑定信息中的内容可以是用户根据绘图需求在画布组件中自定义的内容，预设事件绑定信息可以通过回调函数实现，即在预设事件绑定信息中定义一个函数，该函数中定义了需要执行的操作对应的参数，当预设绑定事件被触发后，可以通过回调该函数执行相应的操作。例如上面的实施例中，onMouseEnter定义的函数为isOnHover＝true；onMouseOut定义的函数为isOnHover＝false。

步骤130，根据组件类型和组件属性进行被执行的画布组件的图像渲染。

具体的，在获得当前被执行的画布组件的组件类型和组件属性后，根据组件类型和组件属性进行被执行的画布组件的图像渲染，使得画布组件对应的图形在画布上显示。

可选的，根据组件类型和组件属性进行被执行的画布组件的图像渲染，可通过下述方式实施：根据组件类型调用对应的应用程序接口API；根据组件属性更新API中的属性值；根据更新后的API执行画布组件，以进行图像渲染。

其中，应用程序接口(Application Programming Interface，API)是一组预先定义的函数，是绘图者基于软件或硬件得以访问的一组例程。本实施例中，API可以是开发人员根据绘图任务预先编辑的并存储于图形绘制库中的一组函数。本实施例中，组件类型表征画布组件对应的图形信息，如“Circle、Rectangle”，则可以根据组件类型调用描述“圆或矩形”的API，调用的API中定义了初始的属性值，将这些初始的属性值更新为组件属性包含的参数值，最后执行更新后的API，以进行图像渲染。

可选的，对于未添加预设事件绑定信息的画布组件，可以直接根据画布类型和画布属性进行画布组件的图像渲染，无需对预设绑定事件进行监听，渲染的方式和上述方式相同，此处不再赘述。

本实施例的技术方案，首先根据绘图任务创建具有类HTML节点特性的画布组件，画布组件包括组件类型和组件属性，然后根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性，最后根据组件类型和组件属性进行被执行的画布组件的图像渲染。本发明实施例提供的网页绘图方法，通过创建具有类HTML节点特性的画布组件，在实现包含预设事件绑定信息的特殊绘图时，根据被触发的预设事件绑定信息确认被执行的画布组件对应的组件类型和组件属性，最后进行被执行的画布组件的图像渲染，相比于现有技术中，采用JS API实现网页绘图，降低网页绘图的难度的同时，迎合了用户熟悉HTML操作的习惯，降低绘图者的工作量和调试难度。

实施例二

图2为本发明实施例二提供的一种网页绘图方法的流程图，以上述实施例为基础，该方法包括如下步骤：

步骤210，根据绘图任务创建具有类HTML节点特性的画布组件。

步骤220，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性。

步骤230，根据组件类型和组件属性进行被执行的画布组件的图像渲染。

步骤240，当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改。若是，则返回执行步骤210，若否，则返回执行步骤220。

具体的，在根据具有类HTML节点特性的画布组件对应的图形在画布上渲染完成后，绘图者查看渲染后的显示效果，若有些不满足要求，需要对画布组件中的组件属性进行修改，当绘图者对组件属性修改时，判断是否是对图形的形状或位置的修改，若是，则服务器要返回执行步骤210的操作，在画布中的显示效果是，清除画布中的所有内容进行重新绘制。若修改的不是对图形或位置的修改，则返回执行步骤220的操作，在画布中的显示效果是，只重新绘制被修改的画布组件对应的图形，其他内容仍在画布中显示。

步骤250，当检测到画布组件被删除时，返回执行步骤210。

具体的，在根据具有类HTML节点特性的画布组件对应的图形在画布上渲染完成后，绘图者查看渲染后的显示效果，若需要删除其中一些图形，绘图者删除该图形对应的画布组件，当服务器检测到画布组件被删除时，返回执行步骤210操作，在画布中的显示效果是，清除画布中的所有内容，按画布组件被删除后的结构重新绘制所有其他组件。

本实施例的技术方案，绘图者在执行修改画布组件或者删除画布组件的操作时，操作的对象是具有类HTML节点特性的画布组件，降低了绘图及调试的难度。

现有的绘图方法，调试Canvas绘制程序只能不停的修改绘制代码->刷新页面观察结果->再实验->再刷新页面观察结果，直到得到期待图形输出结果，而本实施例的方法将Canvas内容的组成、图层、各部分的状态以画布组件的形式展现出来，直接对具有类HTML节点特性的画布组件进行调试，减低调试难度。

另外，发明实施例绘图者通过创建具有类HTML节点特性的画布组件实现绘图，可以与一些开源框架相结合实现绘图。如：JavaScript组件开发框架，以Vue.js举例，绘制时机：在create Lifecycle时绘图，然后对props进行watch发生改变后重绘。还可以与状态管理机相结合，通过一个状态机控制绘图对应的数据，可以在状态改变后再进行图形渲染，减少无意义的重绘，从而减少***资源的浪费。

作为一个具体的示例，图3为基于本实施例提供的网页绘图方法绘制的三维图。下述是该三维图对应的具有类HTML节点特性的数据：

实施例三

图4是为本发明实施例三提供的一种网页绘图装置的结构示意图。如图4所示，该装置包括：画布组件创建模块410，组件类型和组件属性确定模块420和图像渲染模块430。

画布组件创建模块410，用于根据绘图任务创建具有类HTML节点特性的画布组件，画布组件包括组件类型和组件属性；

组件类型和组件属性确定模块420，用于根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

图像渲染模块430，用于根据组件类型和组件属性进行被执行的画布组件的图像渲染。

可选的，图像渲染模块430，还用于：

根据组件类型调用对应的应用程序接口API；

根据组件属性更新API中的属性值；

根据更新后的API执行画布组件，以进行图像渲染。

可选的，还包括：

预设事件绑定信息发送模块，用于将预设事件绑定信息发送至事件监听中心，以对预设事件进行监听；

信息接收模块，用于接收事件监听中心发送的检测到预设事件被触发的信息。

可选的，预设事件绑定信息包括鼠标绑定事件信息，鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；

预设事件绑定信息发送模块，还用于：

将鼠标绑定事件信息发送至鼠标监听中心，以对鼠标事件进行监听。

可选的，还包括：

组件属性修改检测模块，用于当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改；

若是，则返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作；

若不是，则返回执行根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性的操作。

可选的，还包括：

画布组件删除检测模块，用于当检测到画布组件被删除时，返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作。

可选的，画布组件创建模块410，还用于：

获取绘图任务对应的具有类HTML节点特性的数据；

对数据进行解析，根据解析结果创建具有类HTML节点特性的画布组件。

可选的，类HTML节点特性包括：节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点***特性及节点删除特性。

可选的，还包括：

特性转换模块，用于根据类HTML节点特性对对绘图任务对应的原始数据进行特性转换。

上述装置可执行本发明前述所有实施例所提供的方法，具备执行上述方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明前述所有实施例所提供的方法。

实施例四

图5为本发明实施例四提供的一种计算机设备的结构示意图。图5示出了适于用来实现本发明实施方式的计算机设备512的框图。图5显示的计算机设备512仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。计算机设备512典型的是承担多网页绘图功能的计算设备。

如图5所示，计算机设备512以通用计算设备的形式表现。计算机设备512的组件可以包括但不限于：一个或者多个处理器516，存储装置528，连接不同***组件(包括存储装置528和处理器516)的总线518。

总线518表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，***总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MCA)总线，增强型ISA总线、多媒体电子标准协会(Video Electronics Standards Association，VESA)局域总线以及***组件互连(Peripheral Component Interconnect，PCI)总线。

计算机设备512典型地包括多种计算机***可读介质。这些介质可以是任何能够被计算机设备512访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储装置528可以包括易失性存储器形式的计算机***可读介质，例如随机存取存储器(Random Access Memory，RAM)530和/或高速缓存存储器532。计算机设备512可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机***存储介质。仅作为举例，存储***534可以用于读写不可移动的、非易失性磁介质(图5未显示，通常称为“硬盘驱动器”)。尽管图5中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如只读光盘(Compact Disc-Read Only Memory，CD-ROM)、数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线518相连。存储装置528可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块526的程序536，可以存储在例如存储装置528中，这样的程序模块526包括但不限于操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块526通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备512也可以与一个或多个外部设备514(例如键盘、指向设备、摄像头、显示器524等)通信，还可与一个或者多个使得用户能与该计算机设备512交互的设备通信，和/或与使得该计算机设备512能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口522进行。并且，计算机设备512还可以通过网络适配器520与一个或者多个网络(例如局域网(Local AreaNetwork，LAN)，广域网Wide Area Network，WAN)和/或公共网络，例如因特网)通信。如图5所示，网络适配器520通过总线518与计算机设备512的其它模块通信。应当明白，尽管图中未示出，可以结合计算机设备512使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、磁盘阵列(Redundant Arrays ofIndependent Disks，RAID)***、磁带驱动器以及数据备份存储***等。

处理器516通过运行存储在存储装置528中的程序，从而执行各种功能应用以及数据处理，例如实现本发明上述实施例所提供的网页绘图方法。

实施例五

本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例所提供的网页绘图方法。

当然，本发明实施例所提供的一种计算机可读存储介质，其上存储的计算机程序不限于如上所述的方法操作，还可以执行本发明任意实施例所提供的网页绘图方法中的相关操作。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (12)

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

根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；

根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

2.根据权利要求1所述的方法，其特征在于，所述根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染，包括：

根据所述组件类型调用对应的应用程序接口API；

根据所述组件属性更新所述API中的属性值；

根据更新后的API执行画布组件，以进行图像渲染。

3.根据权利要求1所述的方法，其特征在于，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性之前，还包括：

将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听；

接收事件监听中心发送的检测到预设事件被触发的信息。

4.根据权利要求3所述的方法，其特征在于，所述预设事件绑定信息包括鼠标绑定事件信息，所述鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；

相应的，将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听，包括：

将所述鼠标绑定事件信息发送至鼠标监听中心，以对鼠标事件进行监听。

5.根据权利要求1所述的方法，其特征在于，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：

当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改；

若是，则返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作；

若不是，则返回执行根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性的操作。

6.根据权利要求1所述的方法，其特征在于，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：

当检测到画布组件被删除时，返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作。

7.根据权利要求1所述的方法，其特征在于，根据绘图任务创建具有类HTML节点特性的画布组件，包括：

获取绘图任务对应的具有类HTML节点特性的数据；

对所述数据进行解析，根据解析结果创建具有类HTML节点特性的画布组件。

8.根据权利要求7所述的方法，其特征在于，所述类HTML节点特性包括：节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点***特性及节点删除特性。

9.根据权利要求8所述的方法，其特征在于，在获取绘图任务对应的具有类HTML节点特性的数据之前，还包括：

根据所述类HTML节点特性对对绘图任务对应的原始数据进行特性转换。

10.一种网页绘图装置，其特征在于，包括：

画布组件创建模块，用于根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；

组件类型和组件属性确定模块，用于根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

图像渲染模块，用于根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

11.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-9中任一所述的网页绘图方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一所述的网页绘图方法。