html5 canvas:一起画画

Question

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

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

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

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

编辑:

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

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

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方法必须使用不同的笔划和属性,具体取决于消息(或mouselistener)来自哪个客户端.如果多个用户同时绘制,它会发生很大变化.

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

这是一篇很好的文章,其中包含一个应用程序的代码,类似于您要求使用纯JavaScript/HTML5/Canvas构建的多用户绘图板