html5画布：一起画

Question

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

Canvas 的每个属性只有一个实例，只有一个 strokeStyle、一个 fillStyle 等等。当两个用户在同一个画布上绘图时；混乱随之而来。

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

有谁知道这样做的任何其他方法，或者我怎样才能在画布之间正确交换数据？

编辑：

我觉得我说得不够清楚。现在我有了画布，通过 socket.io 来自服务器的消息，手头有不同的绘画请求。当用户移动鼠标画一条线时，画布现在获得 lineWidth、strokeStyle、globalOpacity。但是由于canvas一次只能有一个painter，所以服务器的draw request，包括另一种painter，不能同时绘制。如果我们有足够的用户，画就不会流畅。

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

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