CN108335342B

CN108335342B - 在web浏览器上进行多人绘画的方法、设备和计算机程序产品

Info

Publication number: CN108335342B
Application number: CN201810098086.4A
Authority: CN
Inventors: 杨伟民; 吴杰; 陈盛; 董文秀; 邹欢; 朱坤坤
Original assignee: Hangzhou Netease Zhiqi Technology Co Ltd
Current assignee: Hangzhou Netease Zhiqi Technology Co Ltd
Priority date: 2018-01-31
Filing date: 2018-01-31
Publication date: 2022-03-29
Anticipated expiration: 2038-01-31
Also published as: CN108335342A

Abstract

本发明提供一种在web浏览器上进行多人绘画的方法，包括：创建第一工作区和第一显示区；记录第一终端在所述第一工作区中进行单次操作所生成的第一数据；根据所述第一数据来创建第一图片，所述第一图片包括绘制部分和留白部分；在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片；以及传送所述第一数据，以使得第二终端根据所述第一数据来生成第一对等图片。本发明在Web端提供了一种较为高效的多人互动画板解决方案，其允许多个人在不同的设备、浏览器上登录网页，能利用鼠标，触摸屏设备在网页上进行绘画，每个人的绘制内容将会同步到其他人的页面上，保持所有人网页上的绘制内容一致。

Description

在web浏览器上进行多人绘画的方法、设备和计算机程序产品

技术领域

本发明涉及互联网领域，更具体地，涉及通过web浏览器进行多人绘画的技术。

背景技术

对于通过网络进行多人绘画，存在着多种方式。

中国专利公开号102646235A公开了一种基于图层的多人绘画的电子画板***，处理方法及电子设备，方法包括移动终端接收用户的操作指令在电子画板上绘制数字图像，并将绘制完成的数字图像及相应的绘制过程轨迹上传至服务器进行存储：其他移动终端根据用户的下载指令，从服务器上将所述数字图像下载至本地，并通过电子画板***在下载的数字图像上增加新的图层，操作完成后，根据用户的上传指令将新的数字图像及相应的绘制过程轨迹上传至服务器进行存储，供下一移动终端下载作画及查看相应的绘制过程轨迹。使移动终端增加了新功能：每个移动终端用户都能下载查看他人的画作或是在他人画作的基础上继续作画并上传至服务器再供其他用户下载查看或再创作。

此发明不涉及绘制内容可操作的实现和优化，即无法对每次绘制的内容单独进行删除、缩放、移动、旋转以及添加滤镜效果等操作。移动终端在下载其他用户绘制内容时是下载了数字图像而非绘制轨迹，网络传输成本较高。此发明针对移动端，不适用于Web端

其次，中国专利公开号CN104166970A公开了一种笔迹数据文件的生成、恢复显示方法及装置、电子装置。恢复显示方法包括：解析步骤，根据笔迹数据文件结构，解析笔迹数据文件，获取文件头、笔迹数据区、基础图层索引表及其包含的基础图层索引项；分层步骤，根据基础图层索引表和基础图层索引项，得到待处理的图层；并行绘制步骤，并行处理所有待处理的图层，每个图层根据待处理的图层对应的图层索引项进行绘制；叠合显示步骤，将绘制后的所有图层按顺序叠合，得到一个笔迹图像，显示笔迹图像。通过采用自定义的文件结构来生成笔迹数据文件，从而在恢复显示文件时，可根据基础图层索引表得到多个待处理的图层，采用并行处理方式对这些图层进行绘制，提高了笔迹数据文件的恢复显示速度。

但是，现有技术中的方案不涉及绘制内容可操作的实现和优化，即对每次绘制的内容单独进行删除、缩放、移动、旋转以及添加滤镜效果等操作；此外，现有技术的方案不涉及多人协作情况下的实现特殊之处；更进一步地，现有技术的方案并不能用于Web端，从而应用受到了一定的限制。

此外，由于绘画过程中对图片的渲染和变换可能十分频繁，因此传送的数据量较大，现有技术中也不能较好地处理大量的数据传输，从而容易造成图片的卡顿。

发明内容

本发明的目的是克服现有技术中无法对绘制内容进行优化，无法进行多人同时操作，并且不支持web端，数据传输效率较低的缺陷。

根据本发明的第一方面，提供一种在web浏览器上进行多人绘画的方法，包括：创建第一工作区和第一显示区；记录第一终端在所述第一工作区中进行单次操作所生成的第一数据；根据所述第一数据来创建第一图片，所述第一图片包括绘制部分和留白部分；在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片；以及传送所述第一数据，以使得第二终端根据所述第一数据来生成第一对等图片。

根据本发明的一个实施方式，其中，所述第一工作区和第一显示区通过HTML5的元素Canvas来实现。

根据本发明的一个实施方式，其中，所述HTML5的元素Canvas处于所述第一终端中和/或所述第二终端中。

根据本发明的一个实施方式，其中，所述留白部分是透明的。

根据本发明的一个实施方式，其中，叠加显示包括所述第一图片的叠加图片包括：接收来自所述第二终端的第二数据；根据所述第二数据生成第二对等图片；以及叠加显示包括所述第一图片和第二对等图片的第一叠加图片。

根据本发明的一个实施方式，其中，所述第一图片包括多张图片，其中每张图片对应于一次所述单次操作。

根据本发明的一个实施方式，其中，所述第二对等图片包括多张图片，其中每张图片对应于一份所述第二数据。

根据本发明的一个实施方式，其中，所述单次操作包括下列操作中的至少一种：无中断的单笔绘画操作；无中断的单次擦除操作；对线条特性的单次选择操作；对模板图片的单次选择操作；以及对模板图片的单次变换操作。

根据本发明的一个实施方式，其中，当所述单次操作为无中断的单笔绘画操作或无中断的单次擦除操作时，所述第一数据包括一系列轨迹坐标数据；当所述单次操作为对线条特性的单次选择操作时，所述第一数据包括下列中的至少一种：线条的颜色、粗细、虚线或实线、透明度；当所述单次操作为对模板图片的单次选择操作时，所述第一数据包括所述模板图片的图片标识；当所述单次操作为对模板图片的单次变换操作时，所述第一数据包括所述模板图片的图片标识和变换矩阵，所述变换矩阵表示所述模板图片的旋转、缩放和平移中的至少一种。

根据本发明的一个实施方式，所述第一数据还包括第一终端的身份标识。

根据本发明的一个实施方式，进一步包括：当对所述第一图片进行修改时，记录对所述第一图片进行修改后的第一修改数据；根据所述第一修改数据来生成第一修改图片；消除在所述第一显示区上叠加显示的包括所述第一图片的第一叠加图片；在所述第一显示区重新叠加显示包括所述第一修改图片的、更新后的第一叠加图片；以及传送所述第一修改数据，以使得第二终端根据所述第一修改数据来生成第一修改对等图片。

根据本发明的一个实施方式，其中，响应于所述单次操作的结束，来传送所述第一数据。

根据本发明第二方面，提供一种在web浏览器上进行多人绘画的方法，包括：创建第二显示区；接收来自一个或多个终端的一组或多组绘画数据，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；根据所述一组或多组绘画数据来生成一个或多个图片；以及在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片，所述叠加图片包括叠加绘制部分和叠加留白部分。

根据本发明的一个实施方式，其中，所述第二显示区通过HTML5的元素Canvas来实现。

根据本发明的一个实施方式，其中，所述叠加留白部分是透明的。

根据本发明的一个实施方式，其中，当所述单次操作为无中断的单笔绘画操作或无中断的单次擦除操作时，所述绘画数据包括一系列轨迹坐标数据；当所述单次操作为对线条特性的单次选择操作时，所述绘画数据包括下列中的至少一种：线条的颜色、粗细、虚线或实线、透明度；当所述单次操作为对模板图片的单次选择操作时，所述绘画数据包括所述模板图片的图片标识；当所述单次操作为对模板图片的单次变换操作时，所述绘画数据包括所述模板图片的图片标识和变换矩阵，所述变换矩阵表示所述模板图片的旋转、缩放和平移中的至少一种。

根据本发明的一个实施方式，其中，所述绘画数据还包括所述一个或多个终端的身份标识。

根据本发明的一个实施方式，其中，根据所述一组或多组绘画数据来生成一个或多个图片包括：根据所述一组或多组绘画数据来确定待生成的一个或多个图片的左上角坐标和右下角坐标，以确定所述一个或多个图片的范围。

根据本发明的一个实施方式，其中，根据以数组的方式来存储所述一个或多个图片。

根据本发明的一个实施方式，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，相应的一个或多个图片被更新。

根据本发明的一个实施方式，根据所存储的顺序来在所述第二显示区上显示所述一个或多个图片。

根据本发明的一个实施方式，其中，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，消除所述第二显示区上显示的所述叠加图片；根据发生变化的绘画数据，生成修改图片；将所述修改图片与未发生修改的图片叠加为修改后叠加图片；重新在所述第二显示区上叠加显示所述修改后叠加图片。

根据本发明第三方面，提供一种在web浏览器上进行多人绘画的方法，包括：在第一终端处，创建第一工作区和第一显示区；记录在所述第一工作区中进行单次操作所生成的第一数据；根据所述第一数据来创建第一图片，所述第一图片包括第一绘制部分和第一留白部分；在所述第一显示区上，叠加显示包括所述第一图片的第一叠加图片，其中所述第一叠加图片包括第一叠加绘制部分和第一叠加留白部分；以及传送所述第一数据；在第二终端处，创建第二显示区；接收来自所述第一终端的第一数据；根据所接收的第一数据来生成第一对等图片；以及在所述第二显示区上叠加显示包括所述第一对等图片的第二叠加图片，其中所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分。

根据本发明的一个实施方式，进一步包括：在所述第二终端处，创建第二工作区；记录在所述第二工作区中进行单次操作所生成的第二数据；根据所述第二数据来创建第二图片，其中所述第二图片包括第二绘制部分和第二留白部分；以及在所述第二显示区中叠加显示包括所述第一对等图片和所述第二图片的第二叠加图片，其中，所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分。

根据本发明的一个实施方式，进一步包括：在所述第二终端处，发送所述第二数据；在所述第一终端处，接收所述第二数据；根据所述第二数据来生成第二对等图片；以及在所述第一显示区上叠加显示包括所述第一图片和第二对等图片的第一叠加图片。

根据本发明的一个实施方式，进一步包括：如果所述第二图片和所述第一对等图片中的任意一个或多个被改变，则清除所述第二显示区中包括所述第一对等图片和所述第二图片的第二叠加图片；重新显示包括经过修改的所述第二图片和/或所述第一对等图片的第二修改叠加图片。

根据本发明的一个实施方式，进一步包括：在第一终端和第二终端处，接收来自第三终端的第三数据；根据所述第三数据来生成第三对等图片；在所述第一显示区上叠加显示包括第一图片、第二对等图片和第三对等图片的第一叠加图片；以及在所述第二显示区上叠加显示包括第二图片，第一对等图片和第三对等图片的第二叠加图片。

根据本发明的一个实施方式，其中，在所述第一终端处，所述第一图片，第二对等图片和第三对等图片以数组的方式进行存储；在所述第二终端处，所述第二图片，第一对等图片和第三对等图片以数组的方式进行存储。

根据本发明的一个实施方式，其中，在所述第一终端处，当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，第一图片、第二对等图片和第三对等图片中对应的图片被更新；在所述第二终端处，当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，所述第一对等图片、第二图片和第三对等图片中对应的图片被更新。

根据本发明的一个实施方式，其中，所述第一工作区、第一显示区、第二工作区和第二显示区通过HTML5的元素Canvas来实现。

根据本发明的一个实施方式，其中，在所述第一图片中，所述第一留白部分是透明的；在所述第一叠加图片中，所述第一叠加留白部分是透明的；在所述第二图片中，所述第二留白部分是透明的；在所述第二叠加图片中，所述第二叠加留白部分是透明的。

根据本发明第四方面，提供一种在web浏览器上进行多人绘画的设备，包括：用于创建第一工作区和第一显示区的装置；用于记录第一终端在所述第一工作区中进行单次操作所生成的第一数据的装置；用于根据所述第一数据来创建第一图片的装置，所述第一图片包括绘制部分和留白部分；用于在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片的装置；以及用于传送所述第一数据的装置，以使得第二终端根据所述第一数据来生成第一对等图片。

根据本发明的一个实施方式，用于叠加显示包括所述第一图片的叠加图片的装置包括：用于接收来自所述第二终端的第二数据的装置；用于根据所述第二数据生成第二对等图片的装置；以及用于叠加显示包括所述第一图片和第二对等图片的第一叠加图片的装置。

根据本发明的一个实施方式，所述第二对等图片包括多张图片，其中每张图片对应于一份所述第二数据[P1]。

根据本发明的一个实施方式，进一步包括：当对所述第一图片进行修改时，用于记录对所述第一图片进行修改后的第一修改数据的装置；用于根据所述第一修改数据来生成第一修改图片的装置；用于消除在所述第一显示区上叠加显示的包括所述第一图片的第一叠加图片的装置；用于在所述第一显示区重新叠加显示包括所述第一修改图片的、更新后的第一叠加图片的装置；以及用于传送所述第一修改数据，以使得第二终端根据所述第一修改数据来生成第一修改对等图片的装置。

根据本发明第五方面，提供一种在web浏览器上进行多人绘画的设备，包括：用于创建第二显示区的装置；用于接收来自一个或多个终端的一组或多组绘画数据的装置，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；用于根据所述一组或多组绘画数据来生成一个或多个图片的装置；以及用于在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片的装置，所述叠加图片包括叠加绘制部分和叠加留白部分。

根据本发明的一个实施方式，其中，以数组的方式来存储所述一个或多个图片。

根据本发明的一个实施方式，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，消除所述第二显示区上显示的所述叠加图片；根据发生变化的绘画数据，生成修改图片；将所述修改图片与未发生修改的图片叠加为修改后叠加图片；重新在所述第二显示区上叠加显示所述修改后叠加图片。

根据本发明第六方面，提供一种在web浏览器上进行多人绘画的终端，包括：一个或者多个处理器；存储器；存储在所述存储器中的程序，当被所述一个或者多个处理器执行时，所述程序使所述处理器执行如上所述的方法。

根据本发明第七方面，提供一种计算机可读存储介质，所述计算机可读存储介质存储有程序，当所述程序被处理器执行时，使得所述处理器执行如上所述的方法。

本发明在Web端提供了一种较为高效的多人互动画板解决方案，其允许多个人在不同的设备、浏览器上登录网页，能利用鼠标，触摸屏设备在网页上进行绘画，每个人的绘制内容将会同步到其他人的页面上，保持所有人网页上的绘制内容一致。此外，不同于传统画板，在本发明中每个人每次绘制的内容是独立并且可“互动”的，比如可以对某个用户某一次绘制的内容单独进行删除，缩放，移动，旋转等操作。

需要理解的是，本发明的教导并不需要实现上面所述的全部有益效果，而是特定的技术方案可以实现特定的技术效果，并且本发明的其他实施方式还能够实现上面未提到的有益效果。

附图说明

通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：

在附图中，相同或对应的标号表示相同或对应的部分。

图1为本公开的技术方案所采用的网络框架的示意图；

图2示出了根据本发明一个方面的在web浏览器上进行多人绘画的方法的交互图；

图3a示出了所创建的第一工作区和第一显示区的示意图；

图3b示出了根据本发明一个实施方式的具有绘制部分和留白部分的图片的示意图；

图4示出根据本发明一个实施方式的在一个终端处对图片的存储方式的示意图；

图5示出了根据本发明一个实施方式的图层(layer)的示意图；

图6示出了现有技术中渲染与本发明的预先渲染之间的效率对比；

图7示出了根据本发明另一方面的在web浏览器上进行多人绘画的方法的流程图；

图8示出了根据本发明的另一方面的在web浏览器上进行多人绘画的方法的流程图；

图9示出了根据本发明又一个方面的在web浏览器上进行多人绘画的设备的框图；

图10示出了根据本发明再一个方面的在web浏览器上进行多人绘画的设备；

图11描述了根据本发明的一种实施方式的在web浏览器上进行多人绘画的终端的示意图；以及

图12描述了根据本发明的实施方式的计算机可读存储介质的示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本发明更加透彻和完整，并且能够将本发明的范围完整地传达给本领域的技术人员。

下面结合附图对本发明的具体实施方式进行详细描述。

图1为本公开的技术方案所采用的网络框架的示意图。

如图1所示，本公开所采用***可以包括：用户终端110和服务器120。用户终端之间可以通过服务器120相互收发信息，消息的类型包括但不限于文本、文件、语音、表情、图片、音频、视频以及它们的任意组合。

如图1所示，本公开的用户终端110可以为个人计算机(PC)、笔记本电脑、平板电脑、个人数字助理、iMac、智能手机中的任意一种或多种。这些终端可以包括任何适合的操作***，包括但不限于Windows，Linux， Android，IOS等等。上述客户终端可以是固定的，例如位于家庭，办公室，网吧等处的固定通信设备，也可以位于其他移动平台，例如位于汽车，火车，飞机等平台上。

用户终端110可以通过有线、无线或者二者的组合连接到各个服务器或者云端。无线网络包括但不限于移动电话网、无线局域网(LAN)、蓝牙个人区域网、wifi、以太网、令牌环、广域网、因特网等等。有线网络包括但不限于电话线网、光缆线网、电缆线网、有线电视网等等。

服务器120可以采用任何商用或专用的服务器，本发明对此无任何限制。此外，用户终端110也可以不通过服务器进行直接的通信和聊天，例如通过蓝牙等。图1所示的网络仅仅是一种示例，以便于理解，而不对本发明的网络架构构成任何限制。

本发明采用web浏览器来进行操作，因此只要每个终端能运行web 浏览器即可。

下面对具体应用场景中的一些具体实例进行解释。

本发明利用了HTML5中的Canvas功能，在HTML第5版本中新增的一个元素，名称为Canvas，开发者可以通过脚本在元素中进行图形绘制，比如可以在其中绘制线条，进行图像处理，动画创建以及视频渲染等等。下文会将HTML5Canvas简略称作Canvas。

CanvasRenderingContext2D:HTML5Canvas本身实际上只是网页上的一个元素，用于将内容呈现在网页上，实际进行编程绘制时需要从Canvas 中获取2D渲染用的上下文，即CanvasRenderingContext2D，利用其中的 API对Canvas内容进行绘制。

Path:path实际上就是路径或者轨迹，由多个坐标点组成，在绘制过程中，比如用户使用鼠标在Canvas上划出一道曲线，过程中由每隔一小段时间可以通过浏览器提供的接口获取到鼠标坐标，再将这些路径点连接成曲线，这些点即是path。

Web Socket:浏览器端和服务器端之间一种支持双向通信的网络协议，占用带宽相对较小，通常用于需要高实时性的Web应用中。

图2示出了根据本发明一个方面的在web浏览器上进行多人绘画的方法的交互图。

在图2中示出了两个终端，第一终端和第二终端。需要理解的是，尽管图2中仅仅示出了两个终端，但可以存在更多进行交互的终端，并且这些终端之间是对等的和可互换的。此外，尽管图2中未示出有终端之间的服务器，但本领域技术人员可以理解的是，终端之间也可以存在一个或多个服务器。

如图2所示，在第一终端处，在操作A210，创建第一工作区和第一显示区。

根据本发明的一个实施方式，所述第一工作区和第一显示区可以通过 HTML5的元素Canvas来实现。本发明将以HTML5的元素Canvas为例来进行描述，需要理解的是，在第一终端和第二终端中，可以均采用所述 HTML5的元素Canvas，也可以是第一终端采用HTML5的元素Canvas，第二终端采用其他元素。

图3a示出了所创建的第一工作区和第一显示区的示意图。

如图3a所示，首先，为了实时展示多人绘画的成果，需要有一个Canvas 用于展示，各个用户绘制完毕后得到的结果最终都会呈现在这个Canvas 上，称之为显示区或者DisplayCanvas。

另外，还为每个用户添加了一个Canvas：工作区，或者称为 WorkCanvas,用户的每次利用制图工具(例如鼠标)进行绘图实际上是在这个WorkCanvas上进行的，然后再截取为图片放到DisplayCanvas上。这样做的原因是，DisplayCanvas上还包含了其他用户的绘制内容，如果用户绘制在DisplayCanvas上进行，绘制完成后需要截取本次绘制内容为图片时，难免会将其他用户的绘制也截取进来，导致内容出错，因此引入每个用户专属的Canvas确保绘制完成后截取内容正确。

在操作A215，记录在所述第一工作区(WorkCanvas)中进行单次操作所生成的第一数据。

在Web端，用户通常使用鼠标或触摸屏进行绘制，因此需要监听诸如鼠标按下、移动、松开这些事件，可以通过Web提供的接口，例如 EventListener，对这些事件进行监听，在监听到这些事件后分别进行创建图层，绘制，截取绘制内容为图片并放置到图层中操作。

根据本发明的一个实施方式，上文所述“单次操作”包括下列操作中的至少一种：无中断的单笔绘画操作；无中断的单次擦除操作；对线条特性的单次选择操作；对模板图片的单次选择操作；以及对模板图片的单次变换操作。

无中断的单笔绘画操作例如包括了按下鼠标按键并拖动鼠标以进行绘画，然后松开该鼠标，表明该次绘画已结束；或者对于触摸屏而言，该单次绘画操作可以是用户的手指从接触触摸屏到离开触摸屏的这段操作。在操作时，将产生一系列的轨迹坐标数据，上述的第一数据将包括该一系列的轨迹坐标数据。

对于擦除操作，其实际上和绘画操作是相似的，区别在于绘画操作采用了特定的色彩来绘制，而擦除操作采用了与背景颜色相同的色彩或者透明的色彩来进行绘制，而覆盖掉了原先已绘制的图片。与上述的绘制操作相似，在擦除操作时，第一数据也包括一系列的轨迹坐标数据。

对线条特性的单次选择操作例如可以包括选择线条的颜色、粗细、虚线或实线、透明度等等。

对模板图片的单次选择可以包括例如选择模板库中的特定图片，例如选择一个圆形、选择一个五角星等等。优选地，该第一数据可以包括模板图片的图片标识，该标识可以确定该模板在模板库中的具***置，从而最终确定该图片的模板。

当单次操作为对模板图片的单次变化操作时，所述第一数据可以包括所述模板图片的图片标识和变换矩阵，所述变换矩阵表示所述模板图片的旋转、缩放和平移中的至少一种。通过该变换矩阵，可以知晓该模板图片旋转的角度、缩放的比例以及平移的量等等。

接下来，在生成了第一数据之后，在操作A220，根据所生成的第一数据来创建第一图片，其中第一图片包括第一绘制部分和第一留白部分。由于第一数据中已经包括了例如轨迹等基本信息，因此可以根据这些数据来生成第一图片。

图3b示出了根据本发明一个实施方式的具有绘制部分和留白部分的图片的示意图。

如图3b所示，当用户在工作区(WorkCanvas)中绘制图片时，将会记录用户绘制图片时的轨迹。从轨迹中，可以得到该图片的左上角坐标和右下角坐标(或者是右上角坐标和左下角坐标)，从而可以将左上角坐标和右下角坐标所确定的矩形区域作为要显示的图片。在所要显示的图片中，绘制工具(例如鼠标)实际所运行的轨迹可以称为“绘制部分”，而该长方形其余的部分可以称为“留白部分”。如图3b所示，用户绘制了一个类似于“S”的曲线，则可以从该S曲线的轨迹数据中得到该图片左上角和右下角所确定的矩形图片，在该矩形图片中，除了所绘制的S曲线之外，其余部分为留白部分。在图3b中根据本发明的一个实施方式，该留白部分可以是透明的。

所绘制的图片除了在第一工作区中显示之外，进一步地，在操作A 225，所绘制的图片也可以随其他图片一起叠加显示在第一显示区 (DisplayCanvas)中，显示在第一显示区中的图片由于可能叠加显示了多张图片，因此在此称为第一叠加图片。需要理解的是，这里的第一叠加图片，可以是将多张图片按照叠加顺序合成后形成的一张合成图片，也可以是仅仅将将多张图片叠加显示形成的一个图片集合、而并不合成为一张图片。下文中描述的第二叠加图片、叠加图片、修改叠加图片等均与上述第一叠加图片具有相似的含义，这里将不再赘述。

进一步地，在操作A230，可以将生成的第一数据传送给其他终端，以便于其他终端根据这些数据来生成图片，这将在后文中进行详细描述。

具体而言，可以使用WebSocket将第一数据发送到服务端，由服务端转发给其他终端，以此实现绘画的实时同步。

根据本发明的优选实施方式，当上述的单次操作结束时，例如用户松开鼠标时，则传送所生成的第一数据，这使得每个单次操作的结束都触发数据的传送。

接下来，将结合图2对发生在第二终端处的操作进行详细描述。

如图2所示，在第二终端处，在操作B240，创建第二显示区，并且在操作B 245处，接收来自第一终端的第一数据；在操作B250，第二终端根据所接收到的第一数据来生成与上文中的第一图片相对应的第一对等图片；接下来，生成该第一对等图片之后，在操作B255，在所述第二显示区上叠加显示包括所述第一对等图片的第二叠加图片，其中所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分。需要理解的是，该第二叠加图片将还可以包括其他图片，这将在后文中进行更详细的描述。

更进一步地，由于第二终端和第一终端是对等的，因此，根据本发明的一个实施方式，进一步包括：在所述第二终端处，创建第二工作区；记录在所述第二工作区中进行单次操作所生成的第二数据；根据所述第二数据来创建第二图片，其中所述第二图片包括第二绘制部分和第二留白部分；在所述第二工作区中显示所述第二图片；以及在所述第二显示区中叠加显示包括所述第一对等图片和所述第二图片的第二叠加图片，其中，所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分。

由此，根据以上实施方式，也可以如同在第一终端处那样，在第二终端处也存在一个第二工作区(WorkCanvas)，以便于在第二终端处进行绘画。在第二工作区处绘画，也会生成一组数据，第二终端根据该组数据生成图片，并在第二工作区上显示该图片。此外，还在处于第二终端的第二显示区上显示该生成的图片并且同时显示根据第一数据所生成的第一对等图片。

更进一步地，根据本发明的一个实施方式，第二终端还发送所生成的第二数据，第一终端在接收到该第二数据之后，根据该第二数据生成第二对等图片，并在第一显示区上叠加显示包括所述第一图片和第二对等图片的第一叠加图片。

在以上的描述中，如图3b所示的那样，在所述第一图片中，所述第一留白部分是透明的；在所述第一叠加图片中，所述第一叠加留白部分是透明的；在所述第二图片中，所述第二留白部分是透明的；在所述第二叠加图片中，所述第二叠加留白部分是透明的。

根据本发明的一个实施方式，上述的第一数据还可以包括关于第一终端的身份标识，根据该身份标识，第二终端可以确定所接收到的第一数据来自哪个终端。同样地，第二数据也可以包括关于第二终端的身份标识，根据身份标识，第一终端可以确定所接收到的第二数据来自哪个终端。在多个终端的情况下，这将有助于对所接收到的数据进行索引，并有助于对接收到的数据进行有序存储。

在实际情况中，用户可能会对生成的图片进行修改，如果第一终端的用户对其绘制的图片进行修改，那么上文所述的第一数据就会发生变化。需要理解的是，这里所述的变化包括了各种可能的变化，例如，在擦除一个图片时，被擦除图片本身的数据实际上并没有发生变化，只是在已生成的图片上方覆盖了一层与背景颜色相同的色彩或者覆盖了一层透明的色彩，但这也应当理解为本发明所述的“变化”。此外，在对模板图片进行旋转时，图片本身的数据也未发生变化，但与该图片相关的旋转矩阵发生了变化，因此，这也应当理解为本发明所述的“变化”。

进一步地，当用户在第一终端对第一图片进行修改时，其相应的第一数据也发生了变化，由此，在第一工作区上的图片发生变化，而第一显示区中显示的所有图片(第一叠加图片)将被清除，然后在该第一显示区中重新显示包括经过修改的第一对等图片的第一修改叠加图片。

同理，当用户在第一终端对第一图片进行修改时，其相应的第一数据也发生变化，由此，在第二终端处生成的第一对等图片也发生变化。第二显示区中包括该第一对等图片的第二叠加图片将被清除，然后，在第二显示区中，重新显示包括经过修改的第一对等图片的第二修改叠加图片。

同理，当用户在第二终端处对第二图片进行修改时，其相应的第二数据也发生变化，由此，在第二工作区上的图片发生变化，而第二显示区中显示的所有图片(第二叠加图片)将被清除，然后在该第二显示区中重新显示包括经过修改的第二图片的第二修改叠加图片。

同理，当用户在第二终端处对第二图片进行修改时，其相应的第二数据也发生变化，由此，在第一终端处生成的第二对等图片也发生变化。第一显示区中包括该第二对等图片的第一叠加图片被清除，然后，在第一显示区中，重新显示包括经过修改的第二对等图片的第一修改叠加图片。

上面介绍了第一终端和第二终端的交互情形，下面介绍第三终端的情况。

根据本发明的一个实施方式，本发明的方法进一步包括：在第一终端和第二终端处，接收来自第三终端的第三数据；根据所述第三数据来生成第三对等图片；在所述第一显示区上叠加显示包括第一图片、第二对等图片和第三对等图片的第一叠加图片；以及在所述第二显示区上叠加显示包括第二图片，第一对等图片和第三对等图片的第二叠加图片。

如上所述，当存在第三终端并且用户通过第三终端进行绘画时，第一终端和第二终端可以接收该第三终端生成的第三数据，并且在第一和第二终端处生成相应的第三图片；然后，在第一终端的第一显示区中显示包括了该图片的第一叠加图片，而第二终端在第二显示区中显示包括了该图片的第二叠加图片。类似地，第三终端中的第三显示区也将显示包括了第一图片、第二图片以及第三图片的第三叠加图片。

需要理解的是，尽管上面仅仅描述了三个终端，但本领域技术人员可以理解的是，可以有存在更多的终端。

在存在多个终端时，每个终端将对来自其他终端的图片进行特定方式的存储，以便于能够方便地显示。

图4示出根据本发明一个实施方式的在一个终端处对图片的存储方式的示意图。

如图4所示，根据本发明的一个实施方式，例如当存在第一终端、第二终端和第三终端三个终端时，在所述第一终端处，所述第一图片，第二对等图片和第三对等图片以数组的方式进行存储；类似地，在所述第二终端处，所述第二图片，第一对等图片和第三对等图片以数组的方式进行存储。

以数组方式进行存储的顺序可以有多种，例如，可以以接收到其他终端的绘图数据的时间顺序来进行存储，即每接收到一个来自其他终端的绘图数据，则将与该绘图数据相对应的图片存储起来，后接收到的绘图数据所对应的图片则按照顺序进行存储。

根据本发明的另一个实施方式，也可以根据注册的用户列表，为每个用户预先分配一个存储区以存储与每个用户对应的图片，如果没有接收到来自某一用户的任何绘图数据，则为该用户预留的存储区保持空白。另一方面，需要理解的是，也可以为本终端预留存储空间。

每当从其他终端接收到新的绘图数据时，则根据该绘图数据创建相对应的图片并进行存储。更进一步地，由于每个终端都从其他终端接收其他终端的标识，因此可以将终端的标识与其对应的绘图数据一起存储起来，从而便于对图片进行索引。

根据本发明的一个实施方式，在所述第一终端处，当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，第一图片、第二对等图片和第三对等图片中对应的图片被更新；同样，在所述第二终端处，当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，所述第一对等图片、第二图片和第三对等图片中对应的图片被更新。

由于显示在显示区中的叠加图片是所有图片混合在一起的，因此当有一个图片被更新时，则将该显示区中的叠加图片全部消除，并且从所存储的图片中重新进行加载，从而在显示区形成新的叠加图片。本发明的这种方式使得只需要从发生更新的终端处接收数据，而无需从其他终端重新接收数据，这减少了数据的传输量，提高了图片更新的速度和效率。

更进一步地，如图3b所示，当一个终端从其他的一个或多个终端接收到一组或多组绘画数据时，由于这些绘画数据中包括了绘画时的轨迹，因此可以从这些数据中确定出所要生成的图片的坐标数据，例如所要生成的图片的左上角坐标和右下角坐标，从而确定所要生成的图片的范围；或者，也可以确定所要生成的图片的左下角坐标和右上角坐标，从而也可以确定所要生成的图片的范围。

下面将结合具体的实现来对本发明的技术方案进行详细描述。

为了实现绘制内容的可交互性，可以定义一种可互动对象，其中包含有绘制内容，再把图层作为可互动对象的基本单位。图层用于管理绘制内容以及对内容的变换，在多人的场景下，还需要能记录绘制者信息,以实现一些和用户相关的需求。

图5示出了根据本发明一个实施方式的图层(layer)的示意图。

如图5所示，UID存放了绘制该图层内容的用户ID(例如上文中所述的终端的标识)，如果有用户进行了图层的合并操作，则UID为进行合并操作的用户ID；如果有用户进行了图片的翻转操作，则UID为进行图片的翻转操作的用户ID。

Layer中的ctx则是图层上绘制内容的CanvasRenderingContext2D实例。在实际操作中，将所绘制的内容转为图片后，再创建一个新的Canvas，将这个图片放到Canvas上，获取Canvas的CanvasRenderingContext2D，这样做的原因是相比图片，HTML5Canvas提供了更多能力。在Canvas可以通过编程进行内容绘制，也可以对内容进行变换。

Layer中的transform则是一个变换矩阵，通过矩阵运算可以实现对 Cavans内容的旋转缩放以及平移等等，如下代码可以将绘制内容放大两倍：

let layer＝new Layer(…)；

....

layer.transform＝[2,0,0,2,0,0]；

layer.ctx.transform(...layer.transform)；

corner用于记录用户绘制的范围，其中包含了两个点的坐标，在绘图的过程中通过不断的寻找绘图范围的左上角和右下角(也可以是左下角和右上角)，划定一个矩阵作为最终的范围，将此范围内的内容作为图片保存下来。例如，下面的函数就是在用户移动鼠标的过程中寻找左上角和右下角划定范围：

function onMouseMove(x,y){

…

corner[0].x＝Math.min(x,corner[0].x)

corner[0].y＝Math.min(y,corner[0].y)

corner[1].x＝Math.max(x,corner[1].x)

corner[1].y＝Math.max(y,corner[1].y)

…

(将此次移动到的点坐标x,y发送到服务器并转发给其他用户)

}

在用户松开鼠标时即表明结束了一次绘制，利用先前的corner得到绘制范围的矩形，并导出为图片：

function onMouseUp(x,y){

....

let layer＝new Layer(…)

let imgData＝ctx.getImageData(

corner[0].x,corner[0].y,

corner[1].x–corner[0].x,

corner[1].x–corner[0].x

)

layer.ctx.putImageData(imgData,0,0)

…

}

本发明的核心是基于浏览器提供的能力，在多人互动的场景下高效地实现绘制内容的可操作性，比如对绘制内容进行移动、缩放或旋转等操作。 Web端传统画板应用的实现并不具备绘制内容可操作的概念：当用户使用鼠标或者触摸屏进行一次绘画时，通过每隔一小段时间记录鼠标或者触摸点坐标，得到一组移动路径后，在HTML5Canvas中沿着Path绘制出线条，绘制完毕后本次绘制的内容即和其他绘制内容一并展现在Canvas上。根据HTML5Canvas的已有能力，多次绘制在Canvas上的内容是没有区别的，因此无法单独对某次绘制的内容进行改变。

为了实现绘制内容的可互动性，常见的一种方法是将每次绘画得到的路径保存下来，之后进行移动、缩放或旋转时，利用HTML5Canvas的 API对轨迹上的点进行坐标变换，重新沿着轨迹绘制一次并展示在Canvas 上。在这里存在一个问题，即在重新绘制后，由于先前的绘制已经展示在了Canvas上，所以需要对旧内容进行消除，但已经呈现在Canvas上的内容彼此无法区分开，即使实现橡皮擦功能进行擦除，也会因为笔迹之间的相互覆盖造成擦除错误。在现有技术中，解决方案是把整个Canvas都擦除并将所有绘制路径全部重新渲染，呈现到Canvas上，这种情况下需要沿着每次绘制轨迹上的各个点重新绘制线条，绘制内容较多时工作量较大，效率较低。

本发明提出的方法则是，在每次绘制图片时，将本次绘制的线条单独保存为一张图片，绘制完成后将图片“放置”到HTML5Canvas的对应位置上，这样，改动某次绘制内容后，要重新渲染全部内容时只需要重新把每张图片“放置”到Canvas上即可。即使某一次绘制路径有10000个点，也不需要沿着这10000个点重新绘制曲线，只要把图片放置一次即可，这种方法大大提升了效率。

图6示出了现有技术中渲染与本发明的预先渲染之间的效率对比。图 6中的测试选择了在Chrome 62.0.3202，Windows7 0.0.0的环境中进行。在现有技术的渲染中，每秒大约进行20367次操作，而在本发明的预先渲染中，则可以实现266219次操作，效率提升了大约10倍左右。

更进一步地，为了实现多人绘制内容的同步，需要把每个人的绘制数据传输给其他用户。用户每次绘制的内容已经被保存为了图片，如果将每张图片进行传输，则网络流量消耗将会是很大的。本发明提出的解决方案是在用户绘制图片时，将每次记录下来的鼠标或触摸点坐标传输给其他用户，其他用户收到轨迹后只需要先渲染一次，将轨迹转为图片，之后就同样可以把绘制内容作为图片进行操作，这样一来传输的只是轨迹点坐标数据，而图片需要传输全部像素的RGB值，即使在浏览器端进行压缩，通常也不会比点坐标数据更小。

此外，本发明针对的是在Web端实现，无需创建专用的APP，从而具备了无需下载安装、跨平台以及即开即用的特性。

图7示出了根据本发明另一方面的在web浏览器上进行多人绘画的方法的流程图。如图7所示，本发明的方法包括：在操作S710，创建第一工作区和第一显示区；在操作S720，记录第一终端在所述第一工作区中进行单次操作所生成的第一数据；在操作S730，根据所述第一数据来创建第一图片，所述第一图片包括绘制部分和留白部分；在操作S740，在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片；以及在操作S750，传送所述第一数据，以使得第二终端根据所述第一数据来生成第一对等图片。

根据本发明的一个实施方式，进一步包括：当对所述第一图片进行修改时，记录对所述第一图片进行修改后的第一修改数据；根据所述第一修改数据来生成第一修改图片；消除在所述第一显示区上显示的第一叠加图片；在所述第一显示区重新叠加显示包括所述第一修改图片的、更新后的第一叠加图片；以及，传送所述第一修改数据，以使得第二终端根据所述第一修改数据来生成第一修改对等图片。

图8示出了根据本发明的另一方面的在web浏览器上进行多人绘画的方法的流程图。如图8所示，本发明的方法包括：在操作S810，创建第二显示区；在操作S820，接收来自一个或多个终端的一组或多组绘画数据，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；在操作S830，根据所述一组或多组绘画数据来生成一个或多个图片；以及在操作S840，在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片，所述叠加图片包括叠加绘制部分和叠加留白部分。

根据本发明的一个实施方式，其中所述叠加留白部分是透明的。

根据本发明的一个实施方式，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，相应的一个或多个对等图片被更新。

图9示出了根据本发明又一个方面的在web浏览器上进行多人绘画的设备的框图。如图9所示，设备包括：用于创建第一工作区和第一显示区的装置910；用于记录第一终端在所述第一工作区中进行单次操作所生成的第一数据的装置920；用于根据所述第一数据来创建第一图片的装置 930，所述第一图片包括绘制部分和留白部分；用于在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片的装置940；以及用于传送所述第一数据的装置950，以使得第二终端根据所述第一数据来生成第一对等图片。

根据本发明的一个实施方式，所述第一图片包括多张图片，其中每张图片对应于一次所述单次操作。

图10示出了根据本发明再一个方面的在web浏览器上进行多人绘画的设备。如图10所示，设备包括：用于创建第二显示区的装置1010；用于接收来自一个或多个终端的一组或多组绘画数据的装置1020，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；用于根据所述一组或多组绘画数据来生成一个或多个图片的装置1030；以及用于在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片的装置 1040，所述叠加图片包括叠加绘制部分和叠加留白部分。

示例性设备

在介绍了本发明示例性实施方式的方法和设备之后，接下来，介绍根据本发明的另一方面的在web浏览器上进行多人绘画的终端。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为***、方法或计算机可读存储介质。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“***”。

在一些可能的实施方式中，本发明的终端可以至少包括一个或多个处理器、以及至少一个存储器。其中，所述存储器存储有程序，当所述程序被所述处理器执行时，使得所述处理器执行如下操作：在操作S710，创建第一工作区和第一显示区；在操作S720，记录第一终端在所述第一工作区中进行单次操作所生成的第一数据；在操作S730，根据所述第一数据来创建第一图片，所述第一图片包括绘制部分和留白部分；在操作S740，在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片；以及在操作S750，传送所述第一数据，以使得第二终端根据所述第一数据来生成第一对等图片。

更进一步地，当所述程序被所述处理器执行时，使得所述处理器执行如下操作：在操作S810，创建第二显示区；在操作S820，接收来自一个或多个终端的一组或多组绘画数据，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；在操作S830，根据所述一组或多组绘画数据来生成一个或多个图片；以及在操作S840，在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片，所述叠加图片包括叠加绘制部分和叠加留白部分。

下面参照图11来描述根据本发明的这种实施方式的在web浏览器上进行多人绘画的终端1。图11显示的终端1仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图11所示，终端1可以以通用计算设备的形式表现，包括但不限于：至少一个处理器10、至少一个存储器20、连接不同***组件的总线 60。

总线60表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、***总线、图形加速端口、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储器20可以包括可读介质，例如随机存取存储器(RAM)21和/ 或高速缓存存储器22，还可以进一步包括只读存储器(ROM)23。

存储器20还可以包括程序模块24，这样的程序模块24包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

终端1还可以与一个或多个外部设备2(例如键盘、指向设备、蓝牙设备等)通信，也可与一个或者多个其他设备进行通信。这种通信可以通过输入/输出(I/O)接口40进行，并在显示单元30上进行显示。并且，终端1还可以通过网络适配器50与一个或者多个网络(例如局域网 (LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器50通过总线60与终端1中的其它模块通信。应当明白，尽管图中未示出，但可以结合终端1使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID ***、磁带驱动器以及数据备份存储***等。

示例性计算机可读存储介质

在一些可能的实施方式中，本发明的各个方面还可以实现为一种计算机可读存储介质的形式，其包括程序代码，当所述程序代码在被处理器执行时，所述程序代码用于使所述处理器执行上面描述的方法。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM 或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

如图12所示，描述了根据本发明的实施方式的计算机可读存储介质 3，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的计算机可读存储介质不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

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

此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims

1.一种在web浏览器上进行多人绘画的方法，包括：

创建第一工作区和第一显示区；

记录第一终端在所述第一工作区中进行单次操作所生成的第一数据；

根据所述第一数据来创建第一图片，所述第一图片包括绘制部分和留白部分；

在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片；以及

传送所述第一数据，以使得第二终端根据所述第一数据来生成第一对等图片；

所述方法进一步包括：当对所述第一图片进行修改时，记录对所述第一图片进行修改后的第一修改数据；根据所述第一修改数据来生成第一修改图片；消除在所述第一显示区上叠加显示的包括所述第一图片的第一叠加图片；在所述第一显示区重新叠加显示包括所述第一修改图片的、更新后的第一叠加图片；以及传送所述第一修改数据，以使得第二终端根据所述第一修改数据来生成第一修改对等图片。

2.根据权利要求1所述的方法，其中，所述第一工作区和第一显示区通过HTML5的元素Canvas来实现。

3.根据权利要求2所述的方法，其中，所述HTML5的元素Canvas处于所述第一终端中和/或所述第二终端中。

4.根据权利要求1所述的方法，其中，所述留白部分是透明的。

5.根据权利要求1所述的方法，其中，叠加显示包括所述第一图片的叠加图像包括：

接收来自所述第二终端的第二数据；

根据所述第二数据生成第二对等图片；以及

叠加显示包括所述第一图片和第二对等图片的第一叠加图片。

6.根据权利要求1所述的方法，其中，所述第一图片包括多张图片，其中每张图片对应于一次所述单次操作。

7.根据权利要求5所述的方法，其中，所述第二对等图片包括多张图片，其中每张图片对应于一份所述第二数据。

8.根据权利要求1所述的方法，其中，所述单次操作包括下列操作中的至少一种：

无中断的单笔绘画操作；

无中断的单次擦除操作；

对线条特性的单次选择操作；

对模板图片的单次选择操作；以及

对模板图片的单次变换操作。

9.根据权利要求8所述的方法，其中，

当所述单次操作为无中断的单笔绘画操作或无中断的单次擦除操作时，所述第一数据包括一系列轨迹坐标数据；

当所述单次操作为对线条特性的单次选择操作时，所述第一数据包括下列中的至少一种：线条的颜色、粗细、虚线或实线、透明度；

当所述单次操作为对模板图片的单次选择操作时，所述第一数据包括所述模板图片的图片标识；

当所述单次操作为对模板图片的单次变换操作时，所述第一数据包括所述模板图片的图片标识和变换矩阵，所述变换矩阵表示所述模板图片的旋转、缩放和平移中的至少一种。

10.根据权利要求9所述的方法，所述第一数据还包括第一终端的身份标识。

11.根据权利要求1所述的方法，其中，响应于所述单次操作的结束，来传送所述第一数据。

12.一种在web浏览器上进行多人绘画的方法，包括：

创建第二显示区；

接收来自一个或多个终端的一组或多组绘画数据，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；

根据所述一组或多组绘画数据来生成一个或多个图片；以及

在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片，所述叠加图片包括叠加绘制部分和叠加留白部分；

其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，消除所述第二显示区上显示的所述叠加图片；根据发生变化的绘画数据，生成修改图片；将所述修改图片与未发生修改的图片叠加为修改后叠加图片；重新在所述第二显示区上叠加显示所述修改后叠加图片。

13.根据权利要求12所述的方法，其中，所述第二显示区通过HTML5的元素Canvas来实现。

14.根据权利要求12所述的方法，其中，所述叠加留白部分是透明的。

15.根据权利要求12所述的方法，其中，所述单次操作包括下列操作中的至少一种：

无中断的单笔绘画操作；

无中断的单次擦除操作；

对线条特性的单次选择操作；

对模板图片的单次选择操作；以及

对模板图片的单次变换操作。

16.根据权利要求15所述的方法，其中，

当所述单次操作为无中断的单笔绘画操作或无中断的单次擦除操作时，所述绘画数据包括一系列轨迹坐标数据；

当所述单次操作为对线条特性的单次选择操作时，所述绘画数据包括下列中的至少一种：线条的颜色、粗细、虚线或实线、透明度；

当所述单次操作为对模板图片的单次选择操作时，所述绘画数据包括所述模板图片的图片标识；

当所述单次操作为对模板图片的单次变换操作时，所述绘画数据包括所述模板图片的图片标识和变换矩阵，所述变换矩阵表示所述模板图片的旋转、缩放和平移中的至少一种。

17.根据权利要求16所述的方法，其中，所述绘画数据还包括所述一个或多个终端的身份标识。

18.根据权利要求12所述的方法，其中，根据所述一组或多组绘画数据来生成一个或多个图片包括：

根据所述一组或多组绘画数据来确定待生成的一个或多个图片的左上角坐标和右下角坐标，以确定所述一个或多个图片的范围。

19.根据权利要求12所述的方法，其中，以数组的方式来存储所述一个或多个图片。

20.根据权利要求19所述的方法，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，相应的一个或多个图片被更新。

21.根据权利要求19所述的方法，根据所存储的顺序来在所述第二显示区上显示所述一个或多个图片。

22.一种在web浏览器上进行多人绘画的方法，包括：

在第一终端处，

创建第一工作区和第一显示区；

记录在所述第一工作区中进行单次操作所生成的第一数据；

根据所述第一数据来创建第一图片，所述第一图片包括第一绘制部分和第一留白部分；

在所述第一显示区上，叠加显示包括所述第一图片的第一叠加图片，其中所述第一叠加图片包括第一叠加绘制部分和第一叠加留白部分；以及

传送所述第一数据；

在第二终端处，

创建第二显示区；

接收来自所述第一终端的第一数据；

根据所接收的第一数据来生成第一对等图片；以及

在所述第二显示区上叠加显示包括所述第一对等图片的第二叠加图片，其中所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分；

在所述第二终端处，

创建第二工作区；

记录在所述第二工作区中进行单次操作所生成的第二数据；

根据所述第二数据来创建第二图片，其中所述第二图片包括第二绘制部分和第二留白部分；以及

在所述第二显示区中叠加显示包括所述第一对等图片和所述第二图片的第二叠加图片，其中，所述第二叠加图片包括第二叠加绘制部分和第二叠加留白部分；

所述方法进一步包括：如果所述第二图片和所述第一对等图片中的任意一个或多个被改变，则清除所述第二显示区中包括所述第一对等图片和所述第二图片的第二叠加图片；重新显示包括经过修改的所述第二图片和/或所述第一对等图片的第二修改叠加图片。

23.根据权利要求22所述的方法，进一步包括：

在所述第二终端处，

发送所述第二数据；

在所述第一终端处，

接收所述第二数据；

根据所述第二数据来生成第二对等图片；以及

在所述第一显示区上叠加显示包括所述第一图片和第二对等图片的第一叠加图片。

24.根据权利要求22所述的方法，进一步包括：

在第一终端和第二终端处，

接收来自第三终端的第三数据；

根据所述第三数据来生成第三对等图片；

在所述第一显示区上叠加显示包括第一图片、第二对等图片和第三对等图片的第一叠加图片；以及

在所述第二显示区上叠加显示包括第二图片，第一对等图片和第三对等图片的第二叠加图片。

25.根据权利要求24所述的方法，其中，

在所述第一终端处，

所述第一图片，第二对等图片和第三对等图片以数组的方式进行存储；

在所述第二终端处，

所述第二图片，第一对等图片和第三对等图片以数组的方式进行存储。

26.根据权利要求25所述的方法，其中，

在所述第一终端处，

当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，第一图片、第二对等图片和第三对等图片中对应的图片被更新；

在所述第二终端处，

当所述第一数据、第二数据和第三数据中的任意一者或多者发生变化时，所述第一对等图片、第二图片和第三对等图片中对应的图片被更新。

27.根据权利要求22-26中任意一项所述的方法，其中，所述第一工作区、第一显示区、第二工作区和第二显示区通过HTML5的元素Canvas来实现。

28.根据权利要求27所述的方法，其中，

在所述第一图片中，所述第一留白部分是透明的；

在所述第一叠加图片中，所述第一叠加留白部分是透明的；

在所述第二图片中，所述第二留白部分是透明的；

在所述第二叠加图片中，所述第二叠加留白部分是透明的。

29.根据权利要求22所述的方法，其中，所述单次操作包括下列操作中的至少一种：

无中断的单笔绘画操作；

无中断的单次擦除操作；

对线条特性的单次选择操作；

对模板图片的单次选择操作；以及

对模板图片的单次变换操作。

30.根据权利要求29所述的方法，其中，

31.一种在web浏览器上进行多人绘画的设备，包括：

用于创建第一工作区和第一显示区的装置；

用于记录第一终端在所述第一工作区中进行单次操作所生成的第一数据的装置；

用于根据所述第一数据来创建第一图片的装置，所述第一图片包括绘制部分和留白部分；

用于在所述第一显示区中，叠加显示包括所述第一图片的第一叠加图片的装置；以及

用于传送所述第一数据的装置，以使得第二终端根据所述第一数据来生成第一对等图片；

所述设备进一步包括：当对所述第一图片进行修改时，用于记录对所述第一图片进行修改后的第一修改数据的装置；用于根据所述第一修改数据来生成第一修改图片的装置；用于消除在所述第一显示区上叠加显示的包括所述第一图片的第一叠加图片的装置；用于在所述第一显示区重新叠加显示包括所述第一修改图片的、更新后的第一叠加图片的装置；以及用于传送所述第一修改数据，以使得第二终端根据所述第一修改数据来生成第一修改对等图片的装置。

32.根据权利要求31所述的设备，其中，所述第一工作区和第一显示区通过HTML5的元素Canvas来实现。

33.根据权利要求32所述的设备，其中，所述HTML5的元素Canvas处于所述第一终端中和/或所述第二终端中。

34.根据权利要求31所述的设备，其中，所述留白部分是透明的。

35.根据权利要求31所述的设备，其中，用于叠加显示包括所述第一图片的叠加图片的装置包括：

用于接收来自所述第二终端的第二数据的装置；

用于根据所述第二数据生成第二对等图片的装置；以及

用于叠加显示包括所述第一图片和第二对等图片的第一叠加图片的装置。

36.根据权利要求31所述的设备，其中，所述第一图片包括多张图片，其中每张图片对应于一次所述单次操作。

37.根据权利要求35所述的设备，其中，所述第二对等图片包括多张图片，其中每张图片对应于一份所述第二数据。

38.根据权利要求31所述的设备，其中，所述单次操作包括下列操作中的至少一种：

无中断的单笔绘画操作；

无中断的单次擦除操作；

对线条特性的单次选择操作；

对模板图片的单次选择操作；以及

对模板图片的单次变换操作。

39.根据权利要求38所述的设备，其中，

40.根据权利要求39所述的设备，所述第一数据还包括第一终端的身份标识。

41.根据权利要求31所述的设备，其中，响应于所述单次操作的结束，来传送所述第一数据。

42.一种在web浏览器上进行多人绘画的设备，包括：

用于创建第二显示区的装置；

用于接收来自一个或多个终端的一组或多组绘画数据的装置，其中所述绘画数据是在所述一个或多个终端处进行单次操作而生成的；

用于根据所述一组或多组绘画数据来生成一个或多个图片的装置；以及

用于在所述第二显示区上叠加显示包括所述一个或多个图片的叠加图片的装置，所述叠加图片包括叠加绘制部分和叠加留白部分；

43.根据权利要求42所述的设备，其中，所述第二显示区通过HTML5的元素Canvas来实现。

44.根据权利要求42所述的设备，其中，所述叠加留白部分是透明的。

45.根据权利要求42所述的设备，其中，所述单次操作包括下列操作中的至少一种：

无中断的单笔绘画操作；

无中断的单次擦除操作；

对线条特性的单次选择操作；

对模板图片的单次选择操作；以及

对模板图片的单次变换操作。

46.根据权利要求45所述的设备，其中，

47.根据权利要求46所述的设备，其中，所述绘画数据还包括所述一个或多个终端的身份标识。

48.根据权利要求42所述的设备，其中，根据所述一组或多组绘画数据来生成一个或多个图片包括：

49.根据权利要求42所述的设备，其中，以数组的方式来存储所述一个或多个图片。

50.根据权利要求49所述的设备，其中，当所述一组或多组绘画数据中的任意一组或多组绘画数据发生变化时，相应的一个或多个图片被更新。

51.根据权利要求49所述的设备，根据所存储的顺序来在所述第二显示区上显示所述一个或多个图片。

52.一种在web浏览器上进行多人绘画的终端，包括：

一个或者多个处理器；

存储器；

存储在所述存储器中的程序，当被所述一个或者多个处理器执行时，所述程序使所述处理器执行如权利要求1-30中任意一项所述的方法。

53.一种计算机可读存储介质，所述计算机可读存储介质存储有程序，当所述程序被处理器执行时，使得所述处理器执行如权利要求1-30中任意一项所述的方法。