CN108335342B

CN108335342B - Method, apparatus and computer program product for multi-person drawing on a web browser

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

The invention provides a method for drawing multiple persons on a web browser, which comprises the following steps: creating a first working area and a first display area; recording first data generated by a first terminal performing single operation in the first working area; creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion; in the first display area, displaying a first superposed picture comprising the first picture in a superposed manner; and transmitting the first data to cause a second terminal to generate a first peer-to-peer picture according to the first data. The invention provides a relatively efficient multi-person interactive drawing board solution at a Web end, which allows a plurality of persons to log in a webpage on different devices and browsers, can draw on the webpage by using a mouse and touch screen devices, and ensures that the drawing content of each person is synchronized to the pages of other persons, thereby keeping the drawing content on the webpages of all the persons consistent.

Description

Method, apparatus and computer program product for multi-person drawing on a web browser

Technical Field

The invention relates to the field of Internet, in particular to a technology for drawing multiple persons through a web browser.

Background

There are various ways to do multi-person painting over a network.

Chinese patent publication No. 102646235a discloses an electronic drawing board system, a processing method and an electronic device for drawing by multiple persons based on a drawing layer, the method includes that a mobile terminal receives an operation instruction of a user to draw a digital image on an electronic drawing board, and uploads the drawn digital image and a corresponding drawing process track to a server for storage: and other mobile terminals download the digital image to the local from the server according to the download instruction of the user, add a new image layer on the downloaded digital image through the electronic drawing board system, and upload the new digital image and the corresponding drawing process track to the server for storage according to the upload instruction of the user after the operation is finished so that the next mobile terminal can download the drawing and check the corresponding drawing process track. The mobile terminal is added with new functions: each mobile terminal user can download and view paintings of others or continue to draw on the basis of the paintings of others and upload the paintings to the server for other users to download and view or recreate.

The invention does not relate to the operable realization and optimization of the drawn contents, namely, the operations of deleting, zooming, moving, rotating, adding a filter effect and the like cannot be independently carried out on the drawn contents each time. When downloading the drawing content of other users, the mobile terminal downloads the digital image instead of the drawing track, and the network transmission cost is high. The invention aims at the mobile end and is not suitable for the Web end

Next, chinese patent publication No. CN104166970A discloses a method and apparatus for generating, restoring and displaying handwriting data files, and an electronic apparatus. The restoration display method comprises the following steps: analyzing, namely analyzing the handwriting data file according to the handwriting data file structure to obtain a file header, a handwriting data area, a basic layer index table and a basic layer index item contained in the basic layer index table; layering, namely obtaining a layer to be processed according to the basic layer index table and the basic layer index items; a parallel drawing step, all the layers to be processed are processed in parallel, and each layer is drawn according to the layer index item corresponding to the layer to be processed; and a superposition display step, namely superposing all the drawn layers in sequence to obtain a handwriting image and displaying the handwriting image. The handwriting data file is generated by adopting the self-defined file structure, so that when the display file is restored, a plurality of layers to be processed can be obtained according to the basic layer index table, and the layers are drawn by adopting a parallel processing mode, so that the restoration display speed of the handwriting data file is improved.

However, the solutions in the prior art do not relate to the operable implementation and optimization of the rendered content, i.e. the operations of deleting, zooming, moving, rotating, adding a filter effect, etc. are performed separately on the rendered content each time; in addition, the prior art solution does not involve implementation particulars in a multi-person collaboration situation; furthermore, the prior art solution is not applicable to the Web side, and thus the application is limited.

In addition, because the rendering and transformation of the picture in the drawing process are possibly frequent, the transmitted data volume is large, and the prior art cannot well process the transmission of a large amount of data, so that the picture is easy to jam.

Disclosure of Invention

The invention aims to overcome the defects that the prior art can not optimize the drawn content, can not carry out simultaneous operation of a plurality of persons, can not support a web end and has lower data transmission efficiency.

According to a first aspect of the present invention, there is provided a method of drawing multiple persons on a web browser, comprising: creating a first working area and a first display area; recording first data generated by a first terminal performing single operation in the first working area; creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion; in the first display area, displaying a first superposed picture comprising the first picture in a superposed manner; and transmitting the first data to cause a second terminal to generate a first peer-to-peer picture according to the first data.

According to one embodiment of the invention, the first workspace and the first display area are implemented by an element Canvas of HTML 5.

According to one embodiment of the present invention, an element Canvas of the HTML5 is in the first terminal and/or in the second terminal.

According to one embodiment of the invention, wherein the margin is transparent.

According to an embodiment of the present invention, wherein displaying the overlay picture including the first picture in an overlay manner includes: receiving second data from the second terminal; generating a second peer-to-peer picture according to the second data; and displaying a first superposed picture comprising the first picture and the second peer-to-peer picture in a superposed manner.

According to an embodiment of the present invention, the first picture includes a plurality of pictures, wherein each picture corresponds to one single operation.

According to an embodiment of the invention, the second peer-to-peer picture comprises a plurality of pictures, wherein each picture corresponds to one copy of the second data.

According to an embodiment of the invention, wherein the single operation comprises at least one of the following operations: single-stroke painting operation without interruption; a single erase operation without interruption; a single selection operation of the characteristics of the line; performing single selection operation on the template picture; and a single transformation operation on the template picture.

According to one embodiment of the invention, when the single operation is an uninterrupted single drawing operation or an uninterrupted single erasing operation, the first data comprises a series of track coordinate data; when the single operation is a single selection operation of a line characteristic, the first data includes at least one of: color, thickness, dotted line or solid line, transparency of the line; when the single operation is a single selection operation on a template picture, the first data comprise a picture identifier of the template picture; when the single operation is a single transformation operation on the template picture, the first data comprises a picture identifier of the template picture and a transformation matrix, and the transformation matrix represents at least one of rotation, scaling and translation of the template picture.

According to an embodiment of the invention, the first data further comprises an identity of the first terminal.

According to an embodiment of the present invention, further comprising: when the first picture is modified, recording first modified data after the first picture is modified; generating a first modified picture from the first modification data; eliminating a first overlay picture including the first picture, which is overlappingly displayed on the first display area; displaying the updated first superposed picture including the first modified picture in the first display area in a superposed manner again; and transmitting the first modification data to cause the second terminal to generate a first modified peer-to-peer picture in accordance with the first modification data.

According to one embodiment of the invention, the first data is transmitted in response to the end of the single operation.

According to a second aspect of the present invention, there is provided a method of drawing multiple persons on a web browser, comprising: creating a second display area; receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated by a single operation performed at the one or more terminals; generating one or more pictures from the one or more sets of drawing data; and overlapping and displaying an overlapping picture comprising the one or more pictures on the second display area, wherein the overlapping picture comprises an overlapping drawing part and an overlapping margin part.

According to one embodiment of the invention, the second display area is implemented by the element Canvas of HTML 5.

According to an embodiment of the invention, wherein the overlay margin is transparent.

According to an embodiment of the present invention, wherein, when the single operation is an uninterrupted single painting operation or an uninterrupted single erasing operation, the painting data includes a series of trajectory coordinate data; when the single operation is a single selection operation of a line characteristic, the drawing data includes at least one of: color, thickness, dotted line or solid line, transparency of the line; when the single operation is a single selection operation on the template picture, the drawing data comprises a picture identifier of the template picture; when the single operation is a single transformation operation on the template picture, the drawing data comprises a picture identification and a transformation matrix of the template picture, and the transformation matrix represents at least one of rotation, scaling and translation of the template picture.

According to an embodiment of the invention, wherein the drawing data further comprises an identification of the one or more terminals.

According to an embodiment of the invention, wherein generating one or more pictures from the one or more sets of drawing data comprises: determining upper-left and lower-right coordinates of one or more pictures to be generated according to the one or more sets of drawing data to determine a range of the one or more pictures.

According to an embodiment of the invention, wherein the one or more pictures are stored in an array.

According to an embodiment of the invention, when any one or more of the one or more sets of drawing data changes, the corresponding one or more pictures are updated.

According to one embodiment of the invention, the one or more pictures are displayed on the second display area according to the stored order.

According to an embodiment of the invention, wherein, when any one or more of the one or more sets of drawing data changes, the superimposed picture displayed on the second display area is eliminated; generating a modified picture according to the changed drawing data; superposing the modified picture and the picture which is not modified into a modified superposed picture; and displaying the modified superposed picture on the second display area in an superposed manner.

According to a third aspect of the invention, there is provided a method of drawing multiple persons on a web browser, comprising: creating a first work area and a first display area at a first terminal; recording first data generated by single operation in the first working area; creating a first picture from the first data, the first picture comprising a first drawn portion and a first margin portion; displaying a first superposed picture comprising the first picture in a superposed manner on the first display area, wherein the first superposed picture comprises a first superposed drawing part and a first superposed blank part; and transmitting the first data; creating a second display area at the second terminal; receiving first data from the first terminal; generating a first peer picture from the received first data; and displaying a second superposed picture comprising the first equivalent picture in a superposed manner on the second display area, wherein the second superposed picture comprises a second superposed drawing part and a second superposed blank part.

According to an embodiment of the present invention, further comprising: creating, at the second terminal, a second workspace; recording second data generated by single operation in the second working area; creating a second picture from the second data, wherein the second picture comprises a second drawn portion and a second margin portion; and displaying a second superposed picture comprising the first equivalent picture and the second picture in a superposed manner in the second display area, wherein the second superposed picture comprises a second superposed drawing part and a second superposed blank part.

According to an embodiment of the present invention, further comprising: transmitting, at the second terminal, the second data; receiving, at the first terminal, the second data; generating a second peer-to-peer picture from the second data; and displaying a first superposed picture comprising the first picture and a second peer-to-peer picture in a superposed manner on the first display area.

According to an embodiment of the present invention, further comprising: clearing a second overlay picture comprising the first peer-to-peer picture and the second picture in the second display area if any one or more of the second picture and the first peer-to-peer picture is changed; redisplaying a second modified overlay picture comprising the modified second picture and/or the first peer picture.

According to an embodiment of the present invention, further comprising: receiving, at the first terminal and the second terminal, third data from a third terminal; generating a third peer-to-peer picture from the third data; superposing and displaying a first superposed picture comprising a first picture, a second peer-to-peer picture and a third peer-to-peer picture on the first display area; and displaying a second superposed picture comprising a second picture, a first peer-to-peer picture and a third peer-to-peer picture in a superposed manner on the second display area.

According to an embodiment of the present invention, wherein, at the first terminal, the first picture, the second peer picture and the third peer picture are stored in an array; at the second terminal, the second picture, the first peer-to-peer picture and the third peer-to-peer picture are stored in an array.

According to an embodiment of the present invention, at the first terminal, when any one or more of the first data, the second data and the third data is changed, a corresponding picture of the first picture, the second peer picture and the third peer picture is updated; at the second terminal, when any one or more of the first data, the second data and the third data is changed, corresponding pictures in the first peer-to-peer picture, the second picture and the third peer-to-peer picture are updated.

According to one embodiment of the present invention, the first workspace, first display area, second workspace, and second display area are implemented by the element Canvas of HTML 5.

According to an embodiment of the present invention, wherein, in the first picture, the first margin portion is transparent; in the first overlay picture, the first overlay margin is transparent; in the second picture, the second margin portion is transparent; in the second overlay picture, the second overlay margin is transparent.

According to a fourth aspect of the present invention, there is provided an apparatus for multi-person drawing on a web browser, comprising: means for creating a first workspace and a first display area; means for recording first data generated by a single operation of the first terminal in the first working area; means for creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion; means for displaying, in the first display area, a first overlay picture including the first picture in overlay; and means for transmitting the first data to cause a second terminal to generate a first peer-to-peer picture from the first data.

According to one embodiment of the invention, the device for displaying the superposed pictures including the first picture in a superposed mode comprises the following steps: means for receiving second data from the second terminal; means for generating a second peer-to-peer picture from the second data; and means for displaying a first overlay picture comprising the first picture and a second peer-to-peer picture in overlay.

According to an embodiment of the invention, the second peer-to-peer picture comprises a plurality of pictures, wherein each picture corresponds to a copy of the second data [ P1 ].

According to an embodiment of the present invention, further comprising: when the first picture is modified, recording first modified data after the first picture is modified; means for generating a first modified picture from the first modification data; means for eliminating a first overlay picture including the first picture overlappingly displayed on the first display area; means for displaying an updated first overlay picture including the first modified picture in the first display area in an overlay manner; and means for transmitting the first modification data to cause the second terminal to generate a first modified peer-to-peer picture in accordance with the first modification data.

According to a fifth aspect of the present invention, there is provided an apparatus for multi-person drawing on a web browser, comprising: means for creating a second display area; means for receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated in a single operation at the one or more terminals; means for generating one or more pictures from the one or more sets of drawing data; and means for displaying an overlay picture including the one or more pictures on the second display area in an overlay manner, the overlay picture including an overlay drawing portion and an overlay margin portion.

According to one embodiment of the invention, the one or more pictures are stored in an array.

According to an embodiment of the present invention, wherein the superimposed picture displayed on the second display area is eliminated when any one or more sets of drawing data of the one or more sets of drawing data are changed; generating a modified picture according to the changed drawing data; superposing the modified picture and the picture which is not modified into a modified superposed picture; and displaying the modified superposed picture on the second display area in an superposed manner.

According to a sixth aspect of the present invention, there is provided a terminal for drawing a plurality of persons on a web browser, comprising: one or more processors; a memory; a program stored in the memory, which when executed by the one or more processors, causes the processors to perform the method as described above.

According to a seventh aspect of the present invention, there is provided a computer-readable storage medium storing a program which, when executed by a processor, causes the processor to perform the method as described above.

The invention provides a relatively efficient multi-person interactive drawing board solution at a Web end, which allows a plurality of persons to log in a webpage on different devices and browsers, can draw on the webpage by using a mouse and touch screen devices, and ensures that the drawing content of each person is synchronized to the pages of other persons, thereby keeping the drawing content on the webpages of all the persons consistent. In addition, unlike the traditional drawing board, the content drawn by each person is independent and can be interacted with, for example, the content drawn by a certain user at a time can be deleted, zoomed, moved, rotated and the like independently.

It is to be understood that the teachings of the present invention need not achieve all of the above-described benefits, but rather that specific embodiments may achieve specific technical results, and that other embodiments of the present invention may achieve benefits not mentioned above.

Drawings

The above and other objects, features and advantages of exemplary embodiments of the present invention will become readily apparent from the following detailed description read in conjunction with the accompanying drawings. Several embodiments of the invention are illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings and in which:

in the drawings, the same or corresponding reference numerals indicate the same or corresponding parts.

FIG. 1 is a schematic diagram of a network framework employed in the disclosed solution;

FIG. 2 illustrates an interactive diagram of a method of conducting a multi-person drawing on a web browser in accordance with an aspect of the subject invention;

FIG. 3a shows a schematic view of a first workspace and a first display area being created;

FIG. 3b shows a schematic diagram of a picture with a drawing portion and a whitespace portion, according to one embodiment of the present invention;

FIG. 4 shows a schematic diagram of a way of storing pictures at a terminal according to an embodiment of the invention;

FIG. 5 shows a schematic diagram of a layer according to an embodiment of the invention;

FIG. 6 illustrates an efficiency comparison between prior art rendering and the pre-rendering of the present invention;

FIG. 7 illustrates a flow chart of a method of multi-person drawing on a web browser in accordance with another aspect of the invention;

FIG. 8 illustrates a flow chart of a method of multi-person drawing on a web browser in accordance with another aspect of the invention;

FIG. 9 illustrates a block diagram of an apparatus for multi-person drawing on a web browser in accordance with yet another aspect of the subject invention;

FIG. 10 illustrates an apparatus for multi-person drawing on a web browser in accordance with yet another aspect of the present invention;

FIG. 11 depicts a schematic diagram of a terminal for multi-person drawing on a web browser, according to an embodiment of the invention; and

FIG. 12 depicts a schematic diagram of a computer-readable storage medium according to an embodiment of the invention.

Detailed Description

The principles and spirit of the present invention will be described with reference to a number of exemplary embodiments. It is understood that these embodiments are given solely for the purpose of enabling those skilled in the art to better understand and to practice the invention, and are not intended to limit the scope of the invention in any way. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the invention to those skilled in the art.

The following detailed description of embodiments of the invention refers to the accompanying drawings.

Fig. 1 is a schematic diagram of a network framework adopted in the technical solution of the present disclosure.

As shown in fig. 1, the system employed in the present disclosure may include: user terminal 110 and server 120. The user terminals may send and receive messages to and from each other through the server 120, and the types of messages include, but are not limited to, text, files, voice, expressions, pictures, audio, video, and any combination thereof.

As shown in fig. 1, the user terminal 110 of the present disclosure may be any one or more of a Personal Computer (PC), a notebook computer, a tablet computer, a personal digital assistant, an iMac, and a smart phone. These terminals may include any suitable operating system including, but not limited to, Windows, Linux, Android, IOS, and the like. The client terminal may be stationary, such as a stationary communication device located in a home, office, internet cafe, etc., or may be located on other mobile platforms, such as a car, train, airplane, etc.

The user terminal 110 may be connected to various servers or the cloud via wires, wirelessly, or a combination of both. Wireless networks include, but are not limited to, mobile phone networks, wireless Local Area Networks (LANs), bluetooth personal area networks, wifi, ethernet, token ring, wide area networks, the internet, and the like. Wired networks include, but are not limited to, telephone networks, fiber optic networks, cable television networks, and the like.

Server 120 may be any commercially available or proprietary server, as the present invention is not limited in this respect. Further, the user terminal 110 may perform direct communication and chat without using a server, for example, via bluetooth or the like. The network shown in fig. 1 is merely an example for ease of understanding and does not set any limit to the network architecture of the present invention.

The present invention operates using a web browser, so long as each terminal can run the web browser.

Some specific examples of specific application scenarios are explained below.

The invention utilizes the Canvas function in the HTML5, adds an element with the name of Canvas in the HTML version 5, and developers can draw graphs in the element through scripts, such as drawing lines, processing images, creating animation, rendering videos and the like. The HTML5Canvas will be referred to hereinafter as Canvas for short.

The Canvas 5Canvas itself is actually only an element on the webpage, is used for presenting the content on the webpage, and when actually performing programming, a context for 2D rendering, namely the Canvas 2D, needs to be obtained from the Canvas, and the Canvas content is rendered by using the API therein.

Path is actually a Path or a track and is composed of a plurality of coordinate points, in the drawing process, for example, a user uses a mouse to draw a curve on a Canvas, in the process, the mouse coordinates can be obtained through an interface provided by a browser every short time, and then the Path points are connected into the curve, and the points are the Path.

In the Web Socket, a network protocol supporting two-way communication is arranged between a browser end and a server end, the occupied bandwidth is relatively small, and the Web Socket is generally used in Web application needing high real-time performance.

FIG. 2 illustrates an interactive diagram of a method of conducting a multi-person drawing on a web browser in accordance with an aspect of the subject invention.

In fig. 2 two terminals, a first terminal and a second terminal are shown. It is to be understood that although only two terminals are shown in fig. 2, there may be many more terminals interacting and that the terminals are peer-to-peer and interchangeable. Furthermore, although a server between terminals is not shown in fig. 2, it will be understood by those skilled in the art that one or more servers may also exist between terminals.

As shown in fig. 2, at the first terminal, a first work area and a first display area are created in operation a 210.

According to one embodiment of the invention, the first workspace and first display area may be implemented by the element Canvas of HTML 5. The present invention will be described by taking an element Canvas of HTML5 as an example, and it should be understood that, in the first terminal and the second terminal, the element Canvas of HTML5 may be both adopted, or the element Canvas of HTML5 may be adopted by the first terminal, and the second terminal adopts other elements.

Fig. 3a shows a schematic view of the created first workspace and first display area.

As shown in fig. 3a, firstly, in order to display the result of drawing by multiple users in real time, a Canvas is needed for displaying, and the result obtained after drawing by each user is finally presented on the Canvas, which is called a display area or DisplayCanvas.

In addition, a Canvas is added for each user: each time a user draws with a drawing tool (e.g., a mouse), the workspace, otherwise known as a workbench, is actually drawn on the workbench, and then captured as a picture and placed on the DisplayCanvas. The reason for this is that the DisplayCanvas also contains the drawing contents of other users, and if the user draws on the DisplayCanvas, and needs to intercept the drawing contents as a picture after the drawing is completed, it is inevitable to intercept the drawing of other users, which leads to content errors, so that the Canvas dedicated to each user is introduced to ensure that the intercepted contents are correct after the drawing is completed.

In operation A215, first data generated by a single operation performed in the first work area (Workcanvas) is recorded.

On the Web side, the user usually uses a mouse or a touch screen to draw, and therefore needs to monitor events such as mouse pressing, moving, and releasing, and can monitor the events through an interface provided by the Web, for example, EventListener, and after monitoring the events, create a layer, draw, intercept the drawn content as a picture, and place the picture in the layer.

According to an embodiment of the present invention, the "single operation" described above includes at least one of the following operations: single-stroke painting operation without interruption; a single erase operation without interruption; a single selection operation of the characteristics of the line; performing single selection operation on the template picture; and a single transformation operation on the template picture.

The single-stroke drawing operation without interruption comprises, for example, pressing a mouse button and dragging a mouse to draw, and then releasing the mouse to indicate that the drawing is finished; or, for a touch screen, the single drawing operation may be the operation of the user's finger from contacting the touch screen to leaving the touch screen. In operation, a series of trajectory coordinate data will be generated, and the first data mentioned above will include the series of trajectory coordinate data.

The erasing operation is similar to the drawing operation in that the drawing operation is performed with a specific color, and the erasing operation is performed with the same color as the background color or a transparent color, while the originally drawn picture is covered. Similar to the drawing operation described above, at the time of the erasing operation, the first data also includes a series of track coordinate data.

A single selection operation of a line characteristic may include, for example, selecting a color, thickness, dashed or solid line, transparency, etc. of the line.

A single selection of a template picture may include, for example, selecting a particular picture in the template library, such as selecting a circle, selecting a five-pointed star, and so forth. Preferably, the first data may include a picture identification of the picture as the template, and the identification may determine a specific position of the template in the template library, thereby finally determining the template of the picture.

When the single operation is a single change operation on the template picture, the first data may include a picture identification of the template picture and a transformation matrix representing at least one of rotation, scaling and translation of the template picture. Through the transformation matrix, the angle of rotation, the scale of scaling, the amount of translation, and the like of the template picture can be known.

Next, after the first data is generated, in operation a220, a first picture is created according to the generated first data, wherein the first picture includes a first drawing part and a first margin part. Since the first data already includes basic information such as a track, the first picture can be generated from these data.

Fig. 3b shows a schematic diagram of a picture with a drawing part and a margin part according to an embodiment of the invention.

As shown in fig. 3b, when the user draws a picture in the workspace (WorkCanvas), the trace of the user drawing the picture is recorded. From the track, the coordinates of the upper left corner and the lower right corner of the picture (or the coordinates of the upper right corner and the lower left corner) can be obtained, so that the rectangular area determined by the coordinates of the upper left corner and the lower right corner can be used as the picture to be displayed. In the picture to be displayed, the trace actually run by the drawing tool (e.g., a mouse) may be referred to as a "drawn portion", and the remaining portion of the rectangle may be referred to as a "margin portion". As shown in fig. 3b, if the user draws a curve similar to "S", a rectangular picture determined by the upper left corner and the lower right corner of the picture can be obtained from the trajectory data of the S curve, and the rest of the rectangular picture except for the drawn S curve is a blank part. In fig. 3b the margin may be transparent according to an embodiment of the invention.

Besides the drawn picture being displayed in the first work area, further, in operation a 225, the drawn picture may also be displayed in a first display area (DisplayCanvas) in an overlapping manner along with other pictures, and the picture displayed in the first display area is referred to as a first overlapping picture because multiple pictures may be displayed in an overlapping manner. It should be understood that the first superimposed picture may be a single synthesized picture formed by synthesizing a plurality of pictures in the order of superimposition, or may be a single picture set formed by superimposing and displaying a plurality of pictures, and is not synthesized into a single picture. The second overlay picture, the modified overlay picture, and the like, which are described below, have similar meanings to those of the first overlay picture, and will not be described herein again.

Further, in operation a230, the generated first data may be transmitted to other terminals, so that the other terminals can generate pictures according to the data, which will be described in detail later.

Specifically, WebSocket can be used to send the first data to the server, and the server forwards the first data to other terminals, so as to implement real-time synchronization of the drawing.

According to a preferred embodiment of the invention, when the single operation described above is ended, for example when the user releases the mouse, the first data generated is then transmitted, which causes the end of each single operation to trigger the transmission of data.

Next, the operation occurring at the second terminal will be described in detail with reference to fig. 2.

As shown in fig. 2, at the second terminal, a second display area is created in operation B240, and first data from the first terminal is received in operation B245; in operation B250, the second terminal generates a first peer picture corresponding to the above first picture according to the received first data; next, after the first overlay picture is generated, in operation B255, a second overlay picture including the first overlay picture is overlay-displayed on the second display area, wherein the second overlay picture includes a second overlay drawing portion and a second overlay margin portion. It is to be understood that the second overlay picture will also include other pictures, which will be described in more detail later.

Further, since the second terminal and the first terminal are peer-to-peer, according to an embodiment of the present invention, the method further includes: creating, at the second terminal, a second workspace; recording second data generated by single operation in the second working area; creating a second picture from the second data, wherein the second picture comprises a second drawn portion and a second margin portion; displaying the second picture in the second workspace; and displaying a second superposed picture comprising the first equivalent picture and the second picture in a superposed manner in the second display area, wherein the second superposed picture comprises a second superposed drawing part and a second superposed blank part.

Thus, according to the above embodiment, there may also be a second workspace (WorkCanvas) at the second terminal, as at the first terminal, to facilitate drawing at the second terminal. Drawing at the second working area also generates a group of data, and the second terminal generates a picture according to the group of data and displays the picture on the second working area. Further, the generated picture is also displayed on a second display area at the second terminal and simultaneously a first peer picture generated from the first data is displayed.

Still further, according to an embodiment of the present invention, the second terminal further transmits the generated second data, and the first terminal generates a second peer picture according to the second data after receiving the second data, and displays a first overlay picture including the first picture and the second peer picture on the first display area in an overlay manner.

In the above description, as shown in fig. 3b, in the first picture, the first margin portion is transparent; in the first overlay picture, the first overlay margin is transparent; in the second picture, the second margin portion is transparent; in the second overlay picture, the second overlay margin is transparent.

According to an embodiment of the present invention, the first data may further include an identity of the first terminal, and the second terminal may determine from which terminal the received first data came. Likewise, the second data may also comprise an identity relating to the second terminal, from which the first terminal may determine from which terminal the received second data came. This will facilitate indexing of received data and ordered storage of received data in the case of multiple terminals.

In practical situations, the user may modify the generated picture, and if the user of the first terminal modifies the picture drawn by the user, the first data described above may be changed. It should be understood that the variations described herein include all possible variations, for example, when erasing a picture, the data of the erased picture itself is not actually changed, but only a layer of color identical to the background color is covered on the generated picture or a transparent color is covered on the generated picture, but this should also be understood as "variation" in the present invention. In addition, when the template picture is rotated, the data of the picture itself is not changed, but the rotation matrix related to the picture is changed, so this should be understood as "change" in the present invention.

Further, when the user modifies the first picture at the first terminal, the corresponding first data of the first picture is changed, so that the picture on the first working area is changed, all the pictures (first overlay pictures) displayed in the first display area are cleared, and then the first modified overlay picture including the modified first peer picture is redisplayed in the first display area.

Similarly, when the user modifies the first picture at the first terminal, the corresponding first data changes, and thus the first peer picture generated at the second terminal also changes. The second overlay picture including the first peer picture in the second display area is cleared and then the second modified overlay picture including the modified first peer picture is redisplayed in the second display area.

Similarly, when the user modifies the second picture at the second terminal, the corresponding second data changes, so that the picture on the second working area changes, and all the pictures (second overlay pictures) displayed in the second display area are cleared, and then the second modified overlay picture including the modified second picture is redisplayed in the second display area.

Similarly, when the user modifies the second picture at the second terminal, its corresponding second data changes, and thus the second peer-to-peer picture generated at the first terminal also changes. The first overlay picture including the second peer-to-peer picture in the first display area is removed and then the first modified overlay picture including the modified second peer-to-peer picture is redisplayed in the first display area.

The interaction scenario between the first terminal and the second terminal is described above, and the scenario of the third terminal is described below.

According to an embodiment of the invention, the method of the invention further comprises: receiving, at the first terminal and the second terminal, third data from a third terminal; generating a third peer-to-peer picture from the third data; superposing and displaying a first superposed picture comprising a first picture, a second peer-to-peer picture and a third peer-to-peer picture on the first display area; and displaying a second superposed picture comprising a second picture, a first peer-to-peer picture and a third peer-to-peer picture in a superposed manner on the second display area.

As described above, when there is a third terminal and the user draws through the third terminal, the first terminal and the second terminal may receive third data generated by the third terminal and generate respective third pictures at the first and second terminals; then, a first overlay picture including the picture is displayed in a first display area of the first terminal, and a second overlay picture including the picture is displayed in a second display area of the second terminal. Similarly, the third display area in the third terminal will also display a third overlay picture comprising the first picture, the second picture and the third picture.

It is to be understood that although only three terminals are described above, those skilled in the art will appreciate that there may be many more terminals.

When there are multiple terminals, each terminal will store pictures from the other terminals in a particular way so that they can be conveniently displayed.

Fig. 4 shows a schematic diagram of a way of storing pictures at a terminal according to an embodiment of the present invention.

As shown in fig. 4, according to an embodiment of the present invention, for example, when there are three terminals, a first terminal, a second terminal, and a third terminal, at the first terminal, the first picture, the second peer picture, and the third peer picture are stored in an array; similarly, at the second terminal, the second picture, the first peer picture and the third peer picture are stored in an array.

For example, the storage may be performed in a time sequence of receiving drawing data from another terminal, that is, each time drawing data from another terminal is received, pictures corresponding to the drawing data are stored, and pictures corresponding to the drawing data that are received later are stored in the sequence.

According to another embodiment of the present invention, a storage area may also be pre-allocated to each user according to a registered user list to store a picture corresponding to each user, and if any drawing data from a certain user is not received, the storage area reserved for the user is left blank. On the other hand, it should be understood that a storage space may also be reserved for the terminal.

And each time new drawing data is received from other terminals, creating and storing corresponding pictures according to the drawing data. Further, since each terminal receives the identification of the other terminal from the other terminal, the identification of the terminal can be stored together with the drawing data corresponding thereto, thereby facilitating the indexing of the pictures.

According to one embodiment of the present invention, at the first terminal, when any one or more of the first data, the second data and the third data is changed, corresponding pictures in the first picture, the second peer picture and the third peer picture are updated; also, at the second terminal, when any one or more of the first data, the second data, and the third data is changed, a corresponding picture of the first peer picture, the second picture, and the third peer picture is updated.

Since all the pictures are mixed in the superimposed picture displayed in the display area, when one picture is updated, the superimposed picture in the display area is completely eliminated and reloaded from the stored pictures, so that a new superimposed picture is formed in the display area. The mode of the invention enables the data to be received only from the terminal where the updating occurs and does not need to be received again from other terminals, thereby reducing the transmission quantity of the data and improving the speed and the efficiency of the picture updating.

Furthermore, as shown in fig. 3b, when one terminal receives one or more sets of drawing data from one or more other terminals, since the drawing data includes the drawing trajectory, the coordinate data of the picture to be generated, such as the upper-left coordinate and the lower-right coordinate of the picture to be generated, can be determined from the drawing data, so as to determine the range of the picture to be generated; alternatively, the lower left corner coordinate and the upper right corner coordinate of the picture to be generated may be determined, and thus the range of the picture to be generated may also be determined.

The technical solution of the present invention will be described in detail with reference to specific implementations.

In order to realize the interactivity of the drawing contents, an interactive object may be defined, wherein the drawing contents are contained, and then the layer is used as the basic unit of the interactive object. The layer is used for managing drawing content and transformation of the content, and in a multi-user scene, the information of a drawer needs to be recorded so as to meet some requirements related to users.

Fig. 5 shows a schematic view of a layer according to an embodiment of the invention.

As shown in fig. 5, the UID stores a user ID (for example, the identifier of the terminal described above) for drawing the content of the layer, and if a user performs a merging operation of the layer, the UID is the user ID for performing the merging operation; if the user performs the picture turning operation, the UID is the user ID for performing the picture turning operation.

Ctx in Layer is the instance of canvas renderingcontext2D that draws content on the Layer. In actual operation, after the drawn content is converted into a picture, a new Canvas is created, the picture is put on the Canvas, and the Canvas performance context2D of the Canvas is obtained, so that compared with the picture, the HTML5Canvas provides more capability. Content can be drawn programmatically or transformed in a Canvas.

Transform in Layer is a transformation matrix, and rotation scaling, translation and the like of Cavans content can be realized through matrix operation, and the following code can double the rendering content:

let layer＝new Layer(…)；

....

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

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

the corner is used for recording a drawing range of a user, wherein coordinates of two points are included, a matrix is defined as a final range by continuously searching the upper left corner and the lower right corner (or the lower left corner and the upper right corner) of the drawing range in the drawing process, and contents in the final range are stored as pictures. For example, the following function is to find the upper left and lower right demarcating areas during the mouse movement by the user:

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)

…

(the point coordinates x, y moved to this time are sent to the server and forwarded to other users)

}

When the user releases the mouse, the drawing is finished once, the rectangle of the drawing range is obtained by using the previous corner, and the rectangle is exported to be a picture:

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)

…

}

the core of the invention is based on the capability provided by the browser, and the operability of the drawn content is efficiently realized in the scene of multi-person interaction, such as moving, zooming or rotating the drawn content. The implementation of the traditional drawing board application on the Web side does not have the concept that the drawing content can be operated: when a user uses a mouse or a touch screen to perform drawing once, the coordinates of the mouse or touch points are recorded every other short time to obtain a group of moving paths, then lines are drawn in an HTML5Canvas along Path, and after the drawing is finished, the drawn content is displayed on the Canvas together with other drawn content. According to the existing capability of HTML5Canvas, the content drawn on the Canvas many times is indistinguishable, and therefore, the content drawn one time cannot be changed independently.

In order to implement interactivity of the rendered content, a common method is to save the path obtained by each drawing, and then perform coordinate transformation on the point on the trajectory by using the API of the HTML5Canvas when moving, scaling or rotating, and render the point once again along the trajectory and show the point on the Canvas. There is a problem in that after re-drawing, since the previous drawing is already shown on the Canvas, the old contents need to be erased, but the contents already shown on the Canvas cannot be distinguished from each other, and even if erasing is performed by implementing an eraser function, an erasing error is caused by mutual overlapping between handwriting. In the prior art, the solution is to erase the entire Canvas and render all drawing paths again to present on the Canvas, in which case lines need to be redrawn along each point on the drawing trajectory each time, and when the drawing content is more, the workload is larger and the efficiency is lower.

The method provided by the invention is characterized in that when a picture is drawn each time, the drawn lines are independently stored as a picture, and the picture is placed at the corresponding position of the HTML5Canvas after the drawing is finished, so that after the content of the drawing of a certain time is changed, when all the content is to be re-rendered, each picture is placed on the Canvas again. Even if a certain drawing path has 10000 points, the curve does not need to be redrawn along the 10000 points, and only the picture needs to be placed once, so that the efficiency is greatly improved by the method.

FIG. 6 shows the efficiency comparison between the prior art rendering and the pre-rendering of the present invention. The test in fig. 6 was selected to be performed in the environment of Chrome 62.0.3202, windows 70.0.0. In the prior art rendering, about 20367 operations are performed per second, whereas in the pre-rendering of the present invention, 266219 operations can be achieved, and the efficiency is improved by about 10 times.

Further, in order to achieve synchronization of drawing contents of a plurality of persons, it is necessary to transmit drawing data of each person to other users. The content that the user draws each time is already saved as a picture, and if each picture is transmitted, the network traffic consumption will be large. The solution provided by the invention is that when a user draws a picture, the recorded mouse or touch point coordinates are transmitted to other users each time, the other users only need to render once after receiving the track, the track is converted into the picture, and then the drawn content can be operated as the picture, so that only track point coordinate data are transmitted, the picture needs to transmit RGB values of all pixels, and even if the picture is compressed at a browser end, the picture is usually not smaller than the point coordinate data.

In addition, the invention aims at realizing the method at the Web end without creating a special APP, thereby having the characteristics of no need of downloading and installation, cross-platform and instant use.

FIG. 7 illustrates a flow chart of a method of conducting a multi-person drawing on a web browser in accordance with another aspect of the invention. As shown in fig. 7, the method of the present invention comprises: in operation S710, a first work area and a first display area are created; in operation S720, recording first data generated by a single operation of the first terminal in the first working area; creating a first picture according to the first data, the first picture including a drawing part and a margin part in operation S730; in operation S740, displaying a first overlay picture including the first picture in the first display region in an overlay manner; and transmitting the first data to cause the second terminal to generate a first peer-to-peer picture according to the first data in operation S750.

According to an embodiment of the present invention, further comprising: when the first picture is modified, recording first modified data after the first picture is modified; generating a first modified picture from the first modification data; eliminating a first overlay picture displayed on the first display area; displaying the updated first superposed picture including the first modified picture in the first display area in a superposed manner again; and transmitting the first modification data to cause the second terminal to generate a first modified peer-to-peer picture in accordance with the first modification data.

FIG. 8 illustrates a flow chart of a method of multi-person drawing on a web browser in accordance with another aspect of the invention. As shown in fig. 8, the method of the present invention comprises: in operation S810, creating a second display region; receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated by a single operation performed at the one or more terminals, in operation S820; generating one or more pictures according to the one or more sets of drawing data in operation S830; and in operation S840, displaying an overlay picture including the one or more pictures on the second display area in an overlay manner, the overlay picture including an overlay drawing portion and an overlay margin portion.

According to an embodiment of the invention, the overlay margin is transparent.

According to an embodiment of the invention, when any one or more of the one or more sets of drawing data changes, the corresponding one or more peer pictures are updated.

FIG. 9 illustrates a block diagram of an apparatus for multi-person drawing on a web browser in accordance with yet another aspect of the subject invention. As shown in fig. 9, the apparatus includes: means 910 for creating a first workspace and a first display area; means 920 for recording first data generated by a single operation of the first terminal in the first working area; means 930 for creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion; means 940 for displaying a first overlay picture comprising the first picture in overlay in the first display area; and means 950 for transmitting said first data to cause the second terminal to generate a first peer-to-peer picture from said first data.

According to an embodiment of the present invention, the first picture includes a plurality of pictures, wherein each picture corresponds to one of the single operations.

FIG. 10 illustrates an apparatus for multi-person drawing on a web browser in accordance with yet another aspect of the present invention. As shown in fig. 10, the apparatus includes: means 1010 for creating a second display area; means 1020 for receiving one or more sets of drawing data from one or more terminals at which the drawing data was generated in a single operation; means 1030 for generating one or more pictures from the one or more sets of drawing data; and means 1040 for displaying an overlay picture including the one or more pictures on the second display area in an overlay manner, the overlay picture including an overlay drawing portion and an overlay margin portion.

According to an embodiment of the invention, the overlay margin is transparent.

Exemplary device

Having described the method and apparatus of the exemplary embodiments of the present invention, a terminal for multi-person drawing on a web browser according to another aspect of the present invention is next described.

As will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or computer-readable storage medium. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" system.

In some possible embodiments, the terminal of the present invention may include at least one or more processors, and at least one memory. Wherein the memory stores a program that, when executed by the processor, causes the processor to: in operation S710, a first work area and a first display area are created; in operation S720, recording first data generated by a single operation of the first terminal in the first working area; creating a first picture according to the first data, the first picture including a drawing part and a margin part in operation S730; in operation S740, displaying a first overlay picture including the first picture in the first display region in an overlay manner; and transmitting the first data to cause the second terminal to generate a first peer-to-peer picture according to the first data in operation S750.

Further, the program, when executed by the processor, causes the processor to: in operation S810, creating a second display region; receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated by a single operation performed at the one or more terminals, in operation S820; generating one or more pictures according to the one or more sets of drawing data in operation S830; and in operation S840, displaying an overlay picture including the one or more pictures on the second display area in an overlay manner, the overlay picture including an overlay drawing portion and an overlay margin portion.

A terminal 1 for multi-person drawing on a web browser according to this embodiment of the present invention is described below with reference to fig. 11. The terminal 1 shown in fig. 11 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

As shown in fig. 11, the terminal 1 may be embodied in the form of a general purpose computing device, including but not limited to: at least one processor 10, at least one memory 20, and a bus 60 connecting the various system components.

Bus 60 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures.

The memory 20 may include readable media such as a Random Access Memory (RAM)21 and/or a cache memory 22, and may further include a Read Only Memory (ROM) 23.

Memory 20 may also include program modules 24, such program modules 24 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.

The terminal 1 may also communicate with one or more external devices 2, such as a keyboard, pointing device, bluetooth device, etc., as well as with one or more other devices. Such communication may be via an input/output (I/O) interface 40 and displayed on the display unit 30. Also, the terminal 1 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network such as the internet) through the network adapter 50. As shown, the network adapter 50 communicates with other modules in the terminal 1 via a bus 60. It should be understood that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the terminal 1, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

Exemplary computer readable storage Medium

In some possible embodiments, aspects of the invention may also be embodied in the form of a computer-readable storage medium comprising program code for causing a processor to perform the above-described method when the program code is executed by the processor.

The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

As shown in fig. 12, a computer-readable storage medium 3 according to an embodiment of the present invention is described, which can employ a portable compact disc-read only memory (CD-ROM) and include program codes, and can be run on a terminal device, such as a personal computer. However, the computer-readable storage medium of the present invention is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device over any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., over the internet using an internet service provider).

Moreover, while the operations of the method of the invention are depicted in the drawings in a particular order, this does not require or imply that the operations must be performed in this particular order, or that all of the illustrated operations must be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions.

While the spirit and principles of the invention have been described with reference to several particular embodiments, it is to be understood that the invention is not limited to the disclosed embodiments, nor is the division of aspects, which is for convenience only as the features in such aspects may not be combined to benefit. The invention is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. A method of multi-person drawing on a web browser, comprising:

creating a first working area and a first display area;

recording first data generated by a first terminal performing single operation in the first working area;

creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion;

in the first display area, displaying a first superposed picture comprising the first picture in a superposed manner; and

transmitting the first data to cause a second terminal to generate a first peer-to-peer picture according to the first data;

the method further comprises: when the first picture is modified, recording first modified data after the first picture is modified; generating a first modified picture from the first modification data; eliminating a first overlay picture including the first picture, which is overlappingly displayed on the first display area; displaying the updated first superposed picture including the first modified picture in the first display area in a superposed manner again; and transmitting the first modification data to cause the second terminal to generate a first modified peer-to-peer picture in accordance with the first modification data.

2. The method of claim 1, wherein the first workspace and first display area are implemented by an element Canvas of HTML 5.

3. The method of claim 2, wherein an element Canvas of the HTML5 is in the first terminal and/or in the second terminal.

4. The method of claim 1, wherein the whitespace portion is transparent.

5. The method of claim 1, wherein displaying an overlay image including the first picture in overlay comprises:

receiving second data from the second terminal;

generating a second peer-to-peer picture according to the second data; and

and displaying a first superposed picture comprising the first picture and the second peer-to-peer picture in a superposed manner.

6. The method of claim 1, wherein the first picture comprises a plurality of pictures, wherein each picture corresponds to one of the single operations.

7. The method of claim 5, wherein the second peer-to-peer picture comprises a plurality of pictures, wherein each picture corresponds to one copy of the second data.

8. The method of claim 1, wherein the single operation comprises at least one of:

single-stroke painting operation without interruption;

a single erase operation without interruption;

a single selection operation of the characteristics of the line;

performing single selection operation on the template picture; and

a single transformation operation on the template picture.

9. The method of claim 8, wherein,

when the single operation is an uninterrupted single drawing operation or an uninterrupted single erasing operation, the first data comprises a series of track coordinate data;

when the single operation is a single selection operation of a line characteristic, the first data includes at least one of: color, thickness, dotted line or solid line, transparency of the line;

when the single operation is a single selection operation on a template picture, the first data comprise a picture identifier of the template picture;

when the single operation is a single transformation operation on the template picture, the first data comprises a picture identifier of the template picture and a transformation matrix, and the transformation matrix represents at least one of rotation, scaling and translation of the template picture.

10. The method of claim 9, the first data further comprising an identity of the first terminal.

11. The method of claim 1, wherein the first data is transmitted in response to an end of the single operation.

12. A method of multi-person drawing on a web browser, comprising:

creating a second display area;

receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated by a single operation performed at the one or more terminals;

generating one or more pictures from the one or more sets of drawing data; and

overlaying and displaying an overlaid picture comprising the one or more pictures on the second display area, wherein the overlaid picture comprises an overlaid drawing part and an overlaid blank part;

wherein the superimposed picture displayed on the second display area is eliminated when any one or more of the one or more sets of drawing data changes; generating a modified picture according to the changed drawing data; superposing the modified picture and the picture which is not modified into a modified superposed picture; and displaying the modified superposed picture on the second display area in an superposed manner.

13. The method of claim 12, wherein the second display area is implemented by an element Canvas of HTML 5.

14. The method of claim 12, wherein the overlay margin is transparent.

15. The method of claim 12, wherein the single operation comprises at least one of:

single-stroke painting operation without interruption;

a single erase operation without interruption;

a single selection operation of the characteristics of the line;

performing single selection operation on the template picture; and

a single transformation operation on the template picture.

16. The method of claim 15, wherein,

when the single operation is an uninterrupted single drawing operation or an uninterrupted single erasing operation, the drawing data comprises a series of trajectory coordinate data;

when the single operation is a single selection operation of a line characteristic, the drawing data includes at least one of: color, thickness, dotted line or solid line, transparency of the line;

when the single operation is a single selection operation on the template picture, the drawing data comprises a picture identifier of the template picture;

when the single operation is a single transformation operation on the template picture, the drawing data comprises a picture identification and a transformation matrix of the template picture, and the transformation matrix represents at least one of rotation, scaling and translation of the template picture.

17. The method of claim 16, wherein the drawing data further comprises an identification of the one or more terminals.

18. The method of claim 12, wherein generating one or more pictures from the one or more sets of drawing data comprises:

determining upper-left and lower-right coordinates of one or more pictures to be generated according to the one or more sets of drawing data to determine a range of the one or more pictures.

19. The method of claim 12, wherein the one or more pictures are stored in an array.

20. The method of claim 19, wherein when any one or more of the one or more sets of drawing data changes, the corresponding one or more pictures are updated.

21. The method of claim 19, displaying the one or more pictures on the second display area according to the stored order.

22. A method of multi-person drawing on a web browser, comprising:

at the first end of the first terminal,

creating a first working area and a first display area;

recording first data generated by single operation in the first working area;

creating a first picture from the first data, the first picture comprising a first drawn portion and a first margin portion;

displaying a first superposed picture comprising the first picture in a superposed manner on the first display area, wherein the first superposed picture comprises a first superposed drawing part and a first superposed blank part; and

transmitting the first data;

at the end of the second terminal, the first terminal,

creating a second display area;

receiving first data from the first terminal;

generating a first peer picture from the received first data; and

displaying a second superposed picture comprising the first equivalent picture on the second display area in a superposed manner, wherein the second superposed picture comprises a second superposed drawing part and a second superposed blank part;

at the end of said second terminal, a second terminal,

creating a second working area;

recording second data generated by single operation in the second working area;

creating a second picture from the second data, wherein the second picture comprises a second drawn portion and a second margin portion; and

displaying a second superposed picture comprising the first equivalent picture and the second picture in a superposed manner in the second display area, wherein the second superposed picture comprises a second superposed drawing part and a second superposed blank part;

the method further comprises: clearing a second overlay picture comprising the first peer-to-peer picture and the second picture in the second display area if any one or more of the second picture and the first peer-to-peer picture is changed; redisplaying a second modified overlay picture comprising the modified second picture and/or the first peer picture.

23. The method of claim 22, further comprising:

at the end of said second terminal, a second terminal,

transmitting the second data;

at the first end of the first terminal,

receiving the second data;

generating a second peer-to-peer picture from the second data; and

and displaying a first superposed picture comprising the first picture and a second equivalent picture on the first display area in a superposed manner.

24. The method of claim 22, further comprising:

at the first terminal and the second terminal,

receiving third data from a third terminal;

generating a third peer-to-peer picture from the third data;

superposing and displaying a first superposed picture comprising a first picture, a second peer-to-peer picture and a third peer-to-peer picture on the first display area; and

and superposing and displaying a second superposed picture comprising a second picture, a first peer-to-peer picture and a third peer-to-peer picture on the second display area.

25. The method of claim 24, wherein,

at the first end of the first terminal,

the first picture, the second peer-to-peer picture and the third peer-to-peer picture are stored in an array mode;

at the end of said second terminal, a second terminal,

the second picture, the first peer-to-peer picture and the third peer-to-peer picture are stored in an array mode.

26. The method of claim 25, wherein,

at the first end of the first terminal,

when any one or more of the first data, the second data and the third data are changed, corresponding pictures in the first picture, the second peer-to-peer picture and the third peer-to-peer picture are updated;

at the end of said second terminal, a second terminal,

when any one or more of the first data, the second data and the third data are changed, corresponding pictures in the first peer-to-peer picture, the second picture and the third peer-to-peer picture are updated.

27. The method of any of claims 22-26, wherein the first workspace, first display area, second workspace, and second display area are implemented by an element Canvas of HTML 5.

28. The method of claim 27, wherein,

in the first picture, the first margin portion is transparent;

in the first overlay picture, the first overlay margin is transparent;

in the second picture, the second margin portion is transparent;

in the second overlay picture, the second overlay margin is transparent.

29. The method of claim 22, wherein the single operation comprises at least one of:

single-stroke painting operation without interruption;

a single erase operation without interruption;

a single selection operation of the characteristics of the line;

performing single selection operation on the template picture; and

a single transformation operation on the template picture.

30. The method of claim 29, wherein,

31. An apparatus for multi-person drawing on a web browser, comprising:

means for creating a first workspace and a first display area;

means for recording first data generated by a single operation of the first terminal in the first working area;

means for creating a first picture from the first data, the first picture comprising a drawing portion and a whiteout portion;

means for displaying, in the first display area, a first overlay picture including the first picture in overlay; and

means for transmitting the first data to cause a second terminal to generate a first peer picture from the first data;

the apparatus further comprises: when the first picture is modified, recording first modified data after the first picture is modified; means for generating a first modified picture from the first modification data; means for eliminating a first overlay picture including the first picture overlappingly displayed on the first display area; means for displaying an updated first overlay picture including the first modified picture in the first display area in an overlay manner; and means for transmitting the first modification data to cause the second terminal to generate a first modified peer-to-peer picture in accordance with the first modification data.

32. The device of claim 31, wherein the first workspace and first display are implemented by an element Canvas of HTML 5.

33. The device of claim 32, wherein an element Canvas of the HTML5 is in the first terminal and/or in the second terminal.

34. The apparatus of claim 31, wherein the whitespace portion is transparent.

35. The apparatus of claim 31, wherein means for overlappingly displaying an overlayed picture that includes the first picture comprises:

means for receiving second data from the second terminal;

means for generating a second peer-to-peer picture from the second data; and

means for displaying a first overlay picture comprising the first picture and a second peer-to-peer picture in overlay.

36. The apparatus of claim 31, wherein the first picture comprises a plurality of pictures, wherein each picture corresponds to one of the single operations.

37. The apparatus of claim 35, wherein the second peer-to-peer picture comprises a plurality of pictures, wherein each picture corresponds to one copy of the second data.

38. The apparatus of claim 31, wherein the single operation comprises at least one of:

single-stroke painting operation without interruption;

a single erase operation without interruption;

a single selection operation of the characteristics of the line;

performing single selection operation on the template picture; and

a single transformation operation on the template picture.

39. The apparatus of claim 38, wherein,

40. The apparatus of claim 39, the first data further comprising an identity of the first terminal.

41. The apparatus of claim 31, wherein the first data is transmitted in response to an end of the single operation.

42. An apparatus for multi-person drawing on a web browser, comprising:

means for creating a second display area;

means for receiving one or more sets of drawing data from one or more terminals, wherein the drawing data is generated in a single operation at the one or more terminals;

means for generating one or more pictures from the one or more sets of drawing data; and

means for displaying an overlay picture including the one or more pictures on the second display area in an overlay manner, the overlay picture including an overlay drawing portion and an overlay margin portion;

43. The device of claim 42, wherein the second display area is implemented by an element Canvas of HTML 5.

44. The apparatus of claim 42, wherein the overlay margin is transparent.

45. The apparatus of claim 42, wherein the single operation comprises at least one of:

single-stroke painting operation without interruption;

a single erase operation without interruption;

a single selection operation of the characteristics of the line;

performing single selection operation on the template picture; and

a single transformation operation on the template picture.

46. The apparatus of claim 45, wherein,

47. The device of claim 46, wherein the drawing data further includes an identification of the one or more terminals.

48. The device of claim 42, wherein generating one or more pictures from the one or more sets of drawing data comprises:

49. The device of claim 42, wherein the one or more pictures are stored in an array.

50. The apparatus of claim 49, wherein when any one or more of the one or more sets of drawing data changes, the corresponding one or more pictures are updated.

51. The device of claim 49, the one or more pictures displayed on the second display area according to the stored order.

52. A terminal for drawing by multiple persons on a web browser, comprising:

one or more processors;

a memory;

a program stored in the memory, which when executed by the one or more processors, causes the processors to perform the method of any one of claims 1-30.

53. A computer-readable storage medium storing a program which, when executed by a processor, causes the processor to perform the method of any one of claims 1-30.