CN110727896A - 高性能网页实时绘画互动方法及其系统 - Google Patents

Abstract

本申请公开了一种高性能网页实时绘画互动方法，基于HTML5的画布功能，包括：记录绘画命令，在每一个周期内形成图形变化的命令数据；对所有的命令数据按照记录所产生的时间先后秩序规则进入通道；由通道中读取命令数据并刷新至画布中。在本申请实施例中，本申请提升了网页上画布(canvas)性能，充分结合其特性，使之能够在网页上完成一些复杂的图形处理工作，利用websocket技术，结合服务端，可以达到多人网页在线实时绘画互动的效果。

Description

高性能网页实时绘画互动方法及其系统

技术领域

本申请涉及网页绘图技术领域，尤其涉及一种高性能网页实时绘画互动方法及其系统。

背景技术

现有的网页画布技术，尤其是以基于HTML5的画布(canvas)功能比较简单易上手，能够在网页上实现一些图形图表等的绘图或一些简单的单用户绘画功能。但是该画布功能在互动性上比较匮乏，只能单用户操作，且性能上，只能够实现一些比较简单的图形处理工作。

发明内容

为了解决上述技术问题，本申请实施例提供一种高性能网页实时绘画互动方法及其系统。

本申请实施例第一方面提供了一种高性能网页实时绘画互动方法，基于HTML5的画布功能，可包括：

记录绘画命令，在每一个周期内形成图形变化的命令数据；

对所有的命令数据按照记录所产生的时间先后秩序规则进入通道；

由通道中读取命令数据并刷新至画布中。

进一步地，所述记录绘画命令，在每一个周期内形成图形变化的命令数据，包括：

设置绘画命令记录方法，记录每个绘画操作周期结束时的画布存在图形变化后的命令组，并以命名组为单位绘制出内存位图。

进一步地，所述对所有的命令数据按照记录所产生的时间先后秩序规则进入通道包括：

创建一个内存位图缓存区作为通道，将绘画模块所绘制的内存位图按记录产生的时间先后秩序规则存入该缓存区。

进一步地，所述由通道中读取命令数据并刷新至画布中包括：

读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中。

本申请实施例第二方面提供了一种高性能网页实时绘画互动系统，包括：

绘画模块，用于记录绘画命令，在每一个周期内形成图形变化的命令数据；其中，命令数据包括记录每个绘画操作周期结束时的画布存在图形变化后的命令组，命令数据以命名组为单位的形式绘制出内存位图，并发送至缓存模块；

缓存模块，用于按照记录所产生的时间先后秩序规则存储所有的内存位图；

刷新模块，用于读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中。

进一步地，所述绘画模块中还包括：

多个绘画记录单元，每个所述绘画记录单元用于存储绘画命令记录的方法。

进一步地，所述绘画操作周期由所有绘画记录单元的单次单个调用进行绘画的周期长度形成。

进一步地，所述刷新模块读取缓存模块中的内存位图缓存区所缓存的内存位图并刷新显示至画布中，读取时以先入先出的规则读取。

进一步地，每个画布设置有唯一标识；在绘画模块中，在用户每次调用封装的各类绘画记录单元进行绘画操作时，通过其绘画记录单元调用时的各项数据参数捕捉到画布上图形的像素点数据变化，用以计算出当用户发生各种绘画操作时，画布中所绘画的图形的各个像素点的数据变化，得出一个像素数据组，其中包含了图形中所有存在变化的像素点数据，然后结合画布的唯一标识形成一个图形变化数据组；

所述绘画模块将内存位图和图形变化数据组同时发送至缓存模块。

进一步地，所述缓存模块还包括；

图像变化数据缓存区，将监听计算得出的每一个图形变化数据组存入该缓存区，基于websocket技术使得所有客户端与服务端形成持久的连接。

本申请实施例第三方面提供了一种高性能网页实时绘画互动装置，包括存储器和处理器，所述存储器上存储有计算机可执行指令，所述处理器运行所述存储器上的计算机可执行指令时实现上述第一方面的方法。

本申请实施例第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述第一方面的方法。

在本申请实施例中，本申请提升了网页上画布(canvas)性能，充分结合其特性，使之能够在网页上完成一些复杂的图形处理工作，利用websocket技术，结合服务端，可以达到多人网页在线实时绘画互动的效果。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例的步骤图；

图2是本申请实施例提供的模块示意图。

具体实施方式

为使得本申请的申请目的、特征、优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本申请一部分实施例，而非全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

下面结合附图和具体实施例，进一步阐明本发明。

在本申请的描述中，需要理解的是，术语“上”、“下”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本申请的限制。

本申请实施例基于HTML5的画布(canvas)功能，以实现更高级的图形处理工作，并实现客户端与后台的互动性能。

本申请实施例第一方面提供了一种高性能网页实时绘画互动方法，基于HTML5的画布功能，可包括如下步骤：

S001:记录绘画命令，在每一个周期内形成图形变化的命令数据。

可以理解的是，事先设置绘画命令记录方法，记录每个绘画操作周期结束时的画布存在图形变化后的命令组，并以命名组为单位绘制出内存位图。

一般情况下，画布的在线使用人数会比较多，但是考虑到都是与同一后台互动，因此每个画布上都会设置唯一标识，以进行区别。

S002:对所有的命令数据按照记录所产生的时间先后秩序规则进入通道。

可以理解的是，创建一个内存位图缓存区作为通道，将绘画模块所绘制的内存位图按记录产生的时间先后秩序规则存入该缓存区。

S003:由通道中读取命令数据并刷新至画布中。

读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中。

本申请实施例还包括该高性能网页实时绘画互动系统，充分利用网页画布的特性以封装各类绘画方法，使用户能够在网页上快速直接地绘画各类图形，并能实现裁剪、黑白、反色、锐化、高光、阴影、导出动画等复杂效果或操作，使绘画变得简单丰富。

该系统包括：建立绘画模块、缓存模块以及刷新模块。

绘画模块，用于记录绘画命令，在每一个周期内形成图形变化的命令数据；其中，命令数据包括记录每个绘画操作周期结束时的画布存在图形变化后的命令组，命令数据以命名组为单位的形式绘制出内存位图，并发送至缓存模块。

作为一个具体的实施例，绘画模块中内置有多个绘画记录单元，每个所述绘画记录单元用于存储绘画命令记录的方法。

在绘画模块，设置绘画命令记录方法，以上述封装的各类绘画方法的单次单个调用进行绘画为一个绘画操作周期，记录每个绘画操作周期结束时的画布存在图形变化后的命令组，其中包含绘画至当前图形涉及的所有绘画命令，并以命令组为单位绘制出内存位图。

缓存模块，包括内存位图缓存区，用于按照记录所产生的时间先后秩序规则存储所有的内存位图；图像变化数据缓存区，将监听计算得出的每一个图形变化数据组存入该缓存区，基于websocket技术使得所有客户端与服务端形成持久的连接。

在刷新模块，读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中，这样就能够在有限的浏览器性能负荷下有效的提升画布的绘画性能，而且可以方便追踪和记忆整个绘画过程的绘画状态，以及易于完成图形的还原复现等。

为了实现多人网页在线同个或不同画布同步绘画互动，给页面上的每个画布取一个唯一标识(主要用于将图形变化与更新渲染一一对应)，在绘画模块，在用户每次调用上述封装的各类绘画方法进行绘画操作时，通过其绘画方法调用时的各项数据参数可以方便迅速地捕捉到画布上图形的像素点数据变化，以此可以设置精准的图形绘画数据变化监听方法，用以计算出当用户发生各种绘画操作时，画布中所绘画的图形的各个像素点的数据变化，得出一个像素数据组，其中包含了图形中所有存在变化的像素点数据，然后结合画布标识形成一个图形变化数据组，在缓存模块，除上述内存位图缓存区外，另创建一个独立的图形变化数据缓存区，将上述监听计算得出的每一个图形变化数据组存入该缓存区，利用websocket技术的持久化特点，所有客户端可以与服务端形成持久的连接，任一客户端将其缓存区中的图形变化数据组传入服务端，服务端在收到数据后可以整合数据并马上主动将数据发送给其他客户端，使所有客户端网页上的画布能够根据这些数据进行实时更新图形渲染，达到同步绘画互动效果。

在本申请实施例中，本申请提升了网页上画布(canvas)性能，充分结合其特性，使之能够在网页上完成一些复杂的图形处理工作，利用websocket技术，结合服务端，可以达到多人网页在线实时绘画互动的效果。

以上详细描述了本发明的优选实施方式，但是本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种等同变换(如数量、形状、位置等)，这些等同变换均属于本发明的保护。

Claims (10)

1.一种高性能网页实时绘画互动方法，基于HTML5的画布功能，其特征在于：

包括：

记录绘画命令，在每一个周期内形成图形变化的命令数据；

对所有的命令数据按照记录所产生的时间先后秩序规则进入通道；

由通道中读取命令数据并刷新至画布中。

2.根据权利要求1所述的高性能网页实时绘画互动方法，其特征在于，

所述记录绘画命令，在每一个周期内形成图形变化的命令数据，包括：

设置绘画命令记录方法，记录每个绘画操作周期结束时的画布存在图形变化后的命令组，并以命名组为单位绘制出内存位图。

3.根据权利要求2所述的高性能网页实时绘画互动方法，其特征在于，

所述对所有的命令数据按照记录所产生的时间先后秩序规则进入通道包括：

创建一个内存位图缓存区作为通道，将绘画模块所绘制的内存位图按记录产生的时间先后秩序规则存入该缓存区。

4.根据权利要求3所述的高性能网页实时绘画互动方法，其特征在于，

所述由通道中读取命令数据并刷新至画布中包括：

读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中。

5.一种高性能网页实时绘画互动系统，其特征在于，所述系统包括：

绘画模块，用于记录绘画命令，在每一个周期内形成图形变化的命令数据；其中，命令数据包括记录每个绘画操作周期结束时的画布存在图形变化后的命令组，命令数据以命名组为单位的形式绘制出内存位图，并发送至缓存模块；

缓存模块，用于按照记录所产生的时间先后秩序规则存储所有的内存位图；

刷新模块，用于读取缓存模块中的内存位图缓存区所缓存的内存位图刷新显示至画布中。

6.根据权利要求5所述的高性能网页实时绘画互动系统，其特征在于，

所述绘画模块中还包括：

多个绘画记录单元，每个所述绘画记录单元用于存储绘画命令记录的方法。

7.根据权利要求6所述的高性能网页实时绘画互动系统，其特征在于，

所述绘画操作周期由所有绘画记录单元的单次单个调用进行绘画的周期长度形成。

8.根据权利要求7所述的高性能网页实时绘画互动系统，其特征在于，

所述刷新模块读取缓存模块中的内存位图缓存区所缓存的内存位图并刷新显示至画布中，读取时以先入先出的规则读取。

9.根据权利要求8所述的高性能网页实时绘画互动系统，其特征在于，

每个画布设置有唯一标识；在绘画模块中，在用户每次调用封装的各类绘画记录单元进行绘画操作时，通过其绘画记录单元调用时的各项数据参数捕捉到画布上图形的像素点数据变化，用以计算出当用户发生各种绘画操作时，画布中所绘画的图形的各个像素点的数据变化，得出一个像素数据组，其中包含了图形中所有存在变化的像素点数据，然后结合画布的唯一标识形成一个图形变化数据组；

所述绘画模块将内存位图和图形变化数据组同时发送至缓存模块。

10.根据权利要求9所述的高性能网页实时绘画互动系统，其特征在于，

所述缓存模块还包括；

图像变化数据缓存区，将监听计算得出的每一个图形变化数据组存入该缓存区，基于websocket技术使得所有客户端与服务端形成持久的连接。

Images