HTML5 холст: рисовать вместе

Question

Сейчас я разрабатываю программу чата рисования, используя холст HTML5, и сталкиваюсь с проблемой, что два или более пользователя рисуют на одном и том же холсте одновременно.

У холста есть только один экземпляр для каждого свойства, только один 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}]}

У вас может быть структура данных для отслеживания «атрибутов инсульта» для каждого пользователя. Затем, когда вы получаете сообщение типа moveTo или lineTo, вы ищите clientId, чтобы получить атрибуты обводки, например, penSize и color, тогда вы вызываете те же методы, которые вызываются при рисовании локальным пользователем, например, drawMoveTo и drawLineTo.

Методы draw должны использовать различные штрихи и атрибуты в зависимости от того, от какого клиента поступает сообщение (или Mouselistener). Это сильно изменится, если несколько пользователей будут рисовать одновременно.

Я бы порекомендовал вам осуществлять связь с помощью WebSockets или, возможно, socket.io .

Вот хорошая статья с кодом для приложения, похожего на то, что вы просите Многопользовательская панель для рисования, построенная на чистом JavaScript / HTML5 / Canvas