[发明专利]高性能网页实时绘画互动方法及其系统

说明书

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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