Question

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

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

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

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

编辑：

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

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

Answer 1

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

E.g。如果用户可以设置属性，例如“笔划大小”和颜色，你还需要广播这些变化。

您需要为用户绘画注册鼠标侦听器。他们应该调用绘画的方法，例如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方法必须使用不同的笔划和属性，具体取决于消息（或mouselistener）来自哪个客户端。如果多个用户同时绘制，它会发生很大的变化。

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

这是一篇很好的文章，其中包含类似于您要求Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas

的应用程序的代码

html5 canvas：一起画画

1 个答案: