html5画布:一起绘制

Question

现在我正在使用HTML5 canvas开发一个绘画聊天程序，我遇到了两个或多个用户同时在同一个canvas上绘图的问题。

对于每个属性，Canvas只有一个实例、一个strokeStyle、一个fillStyle，依此类推。当两个用户在同一画布上绘制时，混乱随之而来。

我已经尝试使用更多具有相同位置的画布，但何时以及如何交换两个画布的数据是一个问题。

有没有人知道其他方法，或者如何在画布之间正确地交换数据？

编辑：

我想我说得不够清楚。现在我有了画布，通过socket.io从服务器发来的消息，手头有不同的绘画请求。当用户移动鼠标绘制直线时，画布将显示lineWidth、strokeStyle、globalOpacity。然而，由于canvas一次只能有一个绘制者，所以不能同时绘制来自服务器的绘制请求，包括另一种绘制者。如果我们有足够的用户，这幅画就不会流畅。

我准备写一个队列或类似的东西来实现函数，但可能还有其他方法。

Answer 1

每个客户端都需要将绘图命令发送到服务器。服务器应将命令广播到所有客户端。您需要一个接收消息并绘制消息的方法。

例如，如果用户可以设置“笔划大小”和颜色等属性，您还需要广播这些更改。

您需要为用户绘画注册鼠标侦听器。它们应该调用用于绘制的方法，例如drawMoveTo和drawLineTo，并在单个路径中缓冲命令，这样您就可以将消息中的完整路径广播给其他客户端。

消息的示例可以是：

{"clientId": 36, "penSize": 8, "color": "blue"}
{"clientId": 36, "command": {"moveTo", "x": 48, "y": 12}, 
                   "path": [{"moveTo", "x": 48, "y": 12}]}
{"clientId": 36, "command": {"lineTo", "x": 52, "y": 24}, 
                   "path": [{"lineTo", "x": 52, "y": 24}, 
                            {"moveTo", "x": 48, "y": 12}]}
{"clientId": 36, "command": {"lineTo", "x": 47, "y": 36}, 
                   "path": [{"lineTo", "x": 47, "y": 36},
                            {"lineTo", "x": 52, "y": 24},
                            {"moveTo", "x": 48, "y": 12}]}

您可以使用一个数据结构来跟踪每个用户的"strokeAttributes“。然后，当您收到类型为moveTo或lineTo的消息时，您将查找clientId以获得笔画属性，例如penSize和color，然后调用本地用户绘制时调用的相同方法，例如drawMoveTo和drawLineTo。

根据消息(或鼠标监听器)来自哪个客户端，draw方法必须使用不同的笔画和属性。如果多个用户同时绘制，它将发生很大变化。

我建议您使用WebSockets或socket.io进行通信。

这里有一篇很好的文章，其中包含一个应用程序的代码，该应用程序类似于您所要求的Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas