Collaborative paint на HTML5 Canvas с Node.js и Socket.io


Содержание

10 крутых примеров работы HTML5 Canvas

Холст — интересная особенность в HTML5 Canvas которая позволяет рисовать разнообразные вещи в браузере с помощью технологии Java. Например его можно использовать для управления фотографий, рисовать и анимировать разнообразные формы и фигуры, а так же воспроизводить видео. Но это ещё далеко не придел.

По этому, чтобы продемонстрировать на что возможна HTML5, тут представлена небольшая подборка различных и красивых примеров, которые точно Вам понравятся.

Радужный дождь

Действительно удачный пример анимации работающей на HTML5 Canvas, как будто с неба льёт радужный дождь. Очень красиво смотрится.

Частицы

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

Анимированные круги

Интересный и не сильно сложный эффект работающий на HTML5 Canvas. Тут несколько кругов, которые плавно меняют свою форму, таким образом получается красивый визуальный эффект.

Геометрическая анимация

Ну что сказать, это потрясающий и красивый эффект геометрической анимации на которую можно смотреть вечно, так как выгляди это очень здорово.

Анимационные шары

Плавно двигающиеся шары, замечательный пример который можно сделать на HTML5 Canvas. Этот эффект будет круто и современно смотреться на большинства сайтах.

Созвездие

Тут созданы случайно двигающиеся звёзды, а при наведении мыли они соединяются линиями. Очень красиво сделанное демо.

Молния

Отличная и удачная имитация молнии с помощью HTML5 Canvas. Смотрится очень достойно и потрясающе!

Радужный осьминог

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

Найди курсор

Этот пример отслеживает расположение курсора указывая на него стрелками

Механическая трава

Интересный пример, который реагирует на движения курсора, дорисовывая линии. Очень интересно и необычно придумано.

One more step


Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5353d4c9ccd54e5e • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Создаем многопользовательскую браузерную игру. Часть первая. Клиент-серверная архитектура

Рассказывает Алвин Лин, разработчик программного обеспечения из Нью-Йорка

В 2014 году я впервые побывал на CodeDay в Нью-Йорке. И хотя CodeDay не совсем хакатон, это было моё первое знакомство с подобными мероприятиями. Там мы с моим другом Кеннетом Ли написали многопользовательскую игру в танчики. Так как несколько моих друзей спрашивали меня о том, как я её написал, я решил описать процесс её создания.

В этом посте я вкратце опишу ход своих рассуждений и покажу, как воссоздать архитектуру, а также дам некоторые советы, если вы захотите сделать игру сами. Этот пост рассчитан на тех, кто владеет основами JavaScript и Node.js. Если вы с ними не знакомы, то есть много замечательных онлайн-ресурсов, где можно их изучить.

Прим. перев. На нашем сайте есть много познавательных материалов как по JavaScript, так и по Node.js — обязательно найдёте что-нибудь подходящее.

Бэкенд игры написан на Node.js с использованием веб-сокетов, которые позволяют серверу и клиенту общаться в режиме реального времени. Со стороны клиента игра отображается в HTML5-элементе Canvas . Для начала нам, конечно же, понадобится Node.js. В этой статье описана работа с версией 6.3.1, но вы можете использовать любую версию выше 0.12.

Прим. перев. Если вы не знакомы с веб-сокетами, рекомендуем прочитать наш вводный материал.

Создание проекта

Для начала установите зависимости. Создайте папку проекта, перейдите в неё и запустите следующий код:

Для быстрой настройки сервера целесообразно использовать фреймворк Express, а для обработки веб-сокетов на сервере — пакет socket.io. В файл server.js поместите следующий код:

Это довольно типичный код для сервера на связке Node.js + Express. Он устанавливает зависимости и основные маршруты сервера. Для этого демонстрационного приложения используется только один файл index.html и папка static . Создайте их в корневой папке проекта. Файл index.html довольно простой:

Ваш пользовательский интерфейс может содержать куда больше элементов, поэтому для более крупных проектов CSS-стили лучше помещать в отдельный файл. Для простоты я оставлю CSS в коде HTML. Обратите внимание, что я включил в код скрипт socket.io.js . Он автоматически заработает в рамках пакета socket.io при запуске сервера.

Теперь нужно настроить веб-сокеты на сервере. В конец файла server.js добавьте:

Пока что в игре нет никаких функций, поэтому в обработчик веб-сокетов ничего добавлять не нужно. Для тестирования допишите следующие строки в конец файла server.js :

Эта функция будет отправлять сообщение с именем message и содержимым hi всем подключенным веб-сокетам. Позже не забудьте удалить эту часть кода, так как она предназначена только для тестирования.


20 ноября в 18:30, Москва, беcплатно

В папке static создайте файл с именем game.js . Вы можете написать короткую функцию для регистрации сообщений от сервера, чтобы убедиться в том, что вы их получаете. В файле static/game.js пропишите следующее:

Запустите сервер командой node server.js и в любом браузере перейдите по ссылке http://localhost:5000. Если вы откроете окно разработчика (нажать правую кнопку мыши → Проверить (Inspect)), то увидите, как каждую секунду приходит новое сообщение:

Как правило, socket.emit(name, data) отправляет сообщение с заданным именем и данными серверу, если запрос идет от клиента, и наоборот, если запрос идет от сервера. Для получения сообщений по конкретному имени используется следующая команда:

С помощью socket.emit() вы можете отправить любое сообщение. Можно также передавать объекты JSON, что для нас очень удобно. Это позволяет мгновенно передавать информацию в игре от сервера к клиенту и обратно, что является основой многопользовательской игры.

Теперь пусть клиент отправляет некоторые состояния клавиатуры. Поместите следующий код в конец файла static/game.js :

Цукерберг рекомендует:  Php - Подскажите книгу для новичка в PHP

Это стандартный код, который позволяет отслеживать нажатие клавиш W , A , S , D . После этого добавьте сообщение, которое оповестит сервер о том, что в игре появился новый участник, и создайте цикл, который будет сообщать серверу о нажатии клавиш.

Эта часть кода позволит отправлять на сервер информацию о состоянии клавиатуры клиента 60 раз в секунду. Теперь необходимо прописать эту ситуацию со стороны сервера. В конец файла server.js добавьте следующие строки:

Давайте разберёмся с этим кодом. Вы будете хранить информацию о всех подключенных пользователях в виде объектов JSON. Так как у каждого подключённого к серверу сокета есть уникальный id, клавиша будет представлять собой id сокета подключённого игрока. Значение же будет другим объектом JSON, содержащим координаты x и y .

Когда сервер получит сообщение о том, что присоединился новый игрок, он добавит новый вход в объект игроков при помощи id сокета, который будет в этом сообщении. Когда сервер получит сообщение о движении, то обновит информацию об игроке, который связан с этим сокетом, если он существует.

io.sockets.emit() — это запрос, который будет отправлять сообщение и данные ВСЕМ подключённым сокетам. Сервер будет отправлять это состояние всем подключённым клиентам 60 раз в секунду.

На данном этапе клиент ещё ничего не делает с этой информацией, поэтому добавьте со стороны клиента обработчик, который будет отображать данные от сервера в Canvas .

Этот код обращается к id Canvas ( #canvas ) и рисует там. Каждый раз, когда от сервера будет поступать сообщение о состоянии, данные в Canvas будут обнуляться, и на нём в виде зеленых кружков будут заново отображаться все игроки.

Теперь каждый новый игрок сможет видеть состояние всех подключенных игроков на Canvas . Запустите сервер командой node server.js и откройте в браузере два окна. При переходе по ссылке http://localhost:5000 вы должны будете увидеть нечто похожее:

Вот и всё! Если у вас возникли проблемы, посмотрите архив с исходным кодом.

Некоторые тонкости

Когда будете разрабатывать более функциональную игру, целесообразно разделить код на несколько файлов.

Такие многопользовательские игры — отличный пример архитектуры MVC (модель-представление-контроллер). Вся логическая часть должна обрабатываться на сервере, а всё, что должен делать клиент — это отправлять входные пользовательские данные на сервер и отображать информацию, которую получает от сервера.

Однако в этом демо-проекте есть несколько недостатков. Обновление игры связано со слушателем сокета. Если бы я хотел повлиять на ход игры, то мог бы написать в консоли браузера следующее:

Теперь данные о движении будут отправляться на сервер в зависимости от характеристик компьютера более 60 раз в секунду. Это приведёт к тому, что игрок будет передвигаться невероятно быстро. Так мы переходим к концепции определения полномочного сервера.

Ни на каком этапе клиент не должен контролировать какие-либо данные на сервере. Например, никогда не нужно размещать на сервере код, который позволит клиенту определять своё положение/здоровье на основе данных, которые передаются через сокет, так как пользователь сможет легко подделать сообщение, исходящее из сокета, как показано выше.

Когда я создавал свою первую многопользовательскую игру, я написал код так, что игрок мог стрелять тогда, когда отправлялось сообщение о стрельбе, которое со стороны клиента было связано с нажатием кнопки мыши. Умелый игрок мог воспользоваться этим, вставив строчку на JavaScript, очень похожую на ту, что упоминалась выше, чтобы заполучить почти неограниченную скорость стрельбы.

Лучшая аналогия, которую я могу привести, заключается в том, что клиенты должны посылать на сервер только информацию о своих намерениях, которые затем будут обрабатываться и использоваться для изменения состояния игроков, если они валидны.


В идеале циклы обновлений как у клиента, так и на сервере не должны зависеть от сокетов. Попытайтесь сделать так, чтобы обновления игры находились за пределами блока socket.on() . В противном случае вы можете получить много странных нелогичных действий из-за того, что обновление игры будет связано с обновлением сокета.

Кроме того, старайтесь избегать такого кода:

В этом отрезке кода обновление координаты х для игрока связано с частотой смены кадров в игре. SetInterval() не всегда гарантирует соблюдение интервала, вместо этого напишите нечто подобное:

Это не так изящно, зато обеспечит более плавную и последовательную работу. Усложните демо-проект и попробуйте сделать так, чтобы обновление осуществлялось согласно времени, а не частоте смены кадров. Если не захотите на этом останавливаться, попытайтесь создать на сервере физический движок, который будет управлять движениями игроков.

Также можно сделать так, чтобы из игры удалялись отключенные игроки. Когда сокет отключается, автоматически отправляется сообщение о разъединении. Это можно прописать так:

Также попытайтесь создать собственный физический движок. Это сложно, но весело. Если захотите попробовать, то рекомендую прочитать книгу «The Nature of Code», в которой есть много полезных идей.

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

Build a collaborative rich text editor with Node.js and Socket.io

So Today i’m going to show you how to build a collaborative rich text editor in nodejs and socket.io. Any one from around the world can edit the text editor and collaborate with you as you write your article. In this tutorial i will give you the building blocks on how to build a collaborative text editor with node and socket.io.

If you are unfamiliar with socket.io. Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. What’s really amazing that i actually found out recently was you can connect to socket.io from an entirely different server. So i can use node.js web-sockets on a Rails application, and take advantage of the best of both worlds. In this tutorial we will only use node, but if you would like to know how to connect with ruby as well, let me know. You can test the editor out here https://realtime-editor-endpoint.herokuapp.com/ by opening up two browser windows. Let’s get started! Let’s start by creating a folder called collaborative-text-editor

cd into collaborative-text-editor and run the npm init command

You can just press enter for the json, because we can edit at any time. Notice you will have a package.json file in your directory. This file contains various metadata relevant to the project. Now in the root directory create a file called server.js For this application we will need a few dependencies. We will need express and socket.io Go to the terminal and run npm install express —- save and run npm install socket.io —- save . I will be using coffeescript so you can run npm install -g coffeescript and when you want to compile a file to vanilla javascript you can run coffee -c server.js Or if your using Webstorm you can enable FileWatcher

Now inside of server.coffee we will need to require our packages.

Now we need to instantiate express. Right below those two lines of code add…

We then need to use the app variable to listen on a specific port on the server.

Now in the root directory create a folder called public . This folder will contain all of our files that the public will be able to see, such as index.html, css & javascript files. The files we will need to add in the public directory will be index.html , main.css & main.coffee

Цукерберг рекомендует:  Тест по Python. Python для Data Science

Now back into server.js file we will need to tell node to use the public directory as static files.

For the rich text editor we will be using the froala editor so in the public/index.html we will need to add this boilerplate.

This will set us up with all of the froala editor basic features and a text editor we can refer to. I just gave it an id of ‘text’.

Now back in server.coffee we will need to set up socket.io to talk with the server and client.

Here we are passing in the server so we can connect to the socket. We will need the text variable to save the current text that is inside of the froala editor, so when a new user connects to the websocket that new user will see the contents of the editor rather than the user seeing a blank editor. Thus not potentially deleting all of the contents in the editor. When there is a new connection to the web socket we will run the connection function. The connection function will look like this

Create a Drawing App with HTML5 Canvas and JavaScript

This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn:


  • How to draw dynamically on HTML5 canvas
  • The future possiblities of HTML5 canvas
  • The current browser compatibility of HTML5 canvas

Each step includes a working demo; if you want to skip ahead:

Define Our Objective

Let’s create a web app where the user can dynamically draw on an HTML5 canvas. What will our users use? A coloring book comes to mind; that means crayons. Our first tool is a crayon. Although the real world doesn’t agree, I think we should be able to erase crayons. Our second tool will be an eraser (sorry reality). And because I have always have been a Sharpie® fan our final tool will be a marker.

Our tools could use colors (except maybe our eraser). Let’s keep it simple, so we give our user 4 different colors to choose from.

Similarly let’s also give our user 4 different sizes to draw with, because we can. To recap our app should have the following:

  • 3 tools: crayon, marker, eraser
  • 4 colors to choose from (except eraser)
  • 4 sizes to choose from

Like a coloring book, let’s give our user something to «color». I have chosen a favorite of mine: Watermelon Duck by Rachel Cruthirds.

Prepare HTML5 Canvas: Markup

We only need a line of markup; everything else will be in scripting.

Wait. HTML5 is still new and some browsers (pssst. that means you Internet Explorer) don’t support the canvas tag, so let’s use this line of markup instead:

Prepare HTML5 Canvas: Scripting

To prepare our canvas, we would hope to use:

For Internet Explorer compatibility we will also have to include an additional script: ExplorerCanvas.

Create a Simple Drawing «Canvas»

Before we add any options, let’s tackle the basics of dynamically drawing on an HTML5 canvas. It will consist of 4 mouse events and two functions: addClick to record mouse data and redraw which will draw that data.

Mouse Down Event: When the user clicks on canvas we record the position in an array via the addClick function. We set the boolean paint to true (we will see why in a sec). Finally we update the canvas with the function redraw .

Mouse Move Event: Just like moving the tip of a marker on a sheet of paper, we want to draw on the canvas when our user is pressing down. The boolean paint will let us know if the virtual marker is pressing down on the paper or not. If paint is true, then we record the value. Then redraw.

Mouse Up Event: Marker is off the paper; paint boolean will remember!

Mouse Leave Event: If the marker goes off the paper, then forget you!

Here is the addClick function that will save the click position:

The redraw function is where the magic happens. Each time the function is called the canvas is cleared and everything is redrawn. We could be more efficient and redraw only certain aspects that have been changed, but let’s keep it simple.


We set a few stroke properties for the color, shape, and width. Then for every time we recorded as a marker on paper we are going to draw a line.

Simple Drawing Canvas Demo

Clear the canvas: Clear

Add Colors

Let’s give our user some color choices. To do so, all we need to do is add declare a few global variables and update our redraw function.

Declare four color variables: colorPurple , colorGreen , colorYellow , colorBrown with corresponding hex color values, a variable to store the current color: curColor , and an array to match the chosen color when the user clicked the canvas clickColor .

The addClick function needs to be updated to record the chosen color when the user clicks.

Since the color can vary now, we need to update the redraw function so it references the color that was active when the user clicked. We move the line about strokeStyle into the for loop and assign it to color value in the new array clickColor that corresponds to the user’s clickage.

Demo Colors

Try it with color choices:

  • Clear the canvas: Clear
  • Choose a color: Purple Green Yellow Brown

Add Sizes

Just like we added colors, let’s add some sizes to chose from: «small», «normal», «large», and «huge».

We need a couple more global variables: clickSize and curSize .

The addClick function needs to be updated to record the chosen size when the user clicks.

Update the redraw function to handle the new sizes.

Demo Sizes

Try it with different sizes:

  • Clear the canvas: Clear
  • Choose a color: Purple Green Yellow Brown
  • Choose a size: Small Normal Large Huge

Add Tools

Crayon, Marker, Eraser. Three tools. Let’s make them.


The two global variables we need are: clickTool and curTool .

The addClick function needs to be updated to record the chosen tool when the user clicks.

Update the redraw function to handle the new tools.

Demo Tools

Try it with different tools:

  • Clear the canvas: Clear
  • Choose a color: Purple Green Yellow Brown
  • Choose a size: Small Normal Large Huge
  • Choose a tool: Crayon Marker Eraser

Add Outline

Coloring books provide an outline of something to color: a cute puppy or a hopping bunny. I chose a watermelon duck.

First declare a variable outlineImage .

Load the outline image.

Update the redraw function to draw the outline image using the canvas context’s drawImage method. Its parameters are the image object we loaded, the position we want to draw the image, and the dimensions of the image.

Demo Outline

  • Clear the canvas: Clear
  • Choose a color: Purple Green Yellow Brown
  • Choose a size: Small Normal Large Huge
  • Choose a tool: Crayon Marker Eraser
Цукерберг рекомендует:  Структурные псевдо-классы и псевдо-элементы

Final Details

We are almost there! These last details are optional: restrict the drawing area to a rectangle on the canvas and use the rest of the canvas for our gui (aka buttons).

Let’s mask the canvas so all drawing is within a the drawing area. We use the clip method with the save and restore methods. This method is not currently supported by Internet Explorer.

The last detail is to move all those buttons on our canvas. It involves loading images and displaying them based on our user interaction. I used standard JavaScript techniques so I won’t bore you with the details (but it is included in the source code if you are interested). And there you have it!

Complete Demo

Now that we have created an HTML5 canvas drawing app, lets take a break and draw!

Download Source Code


  • Download HTML5 Canvas Drawing App (zip format): html5-canvas-drawing-app.zip

Updates

  • Download an updated version (slightly different from the article) that includes touch support on GitHub: github.com/williammalone/Simple-HTML5-Drawing-App
  • A paint bucket tool was added to this app. Demo and source code is available here.

Examples In Action

If you built something using this article and want to share, please let me know! There are a lot of great applications out there including:

Collaborative paint на HTML5 Canvas с Node.js и Socket.io

I just installed the app, no problems.

It loads with no errors but does not draw.

After selecting a pen and a color, moving the mouse around gives a few console errors

CS -> BG : FAILED closepopuptoplevel onloadwff.js:77

I’m wondering if anyone else sees this, before digging into it.

I’m running on Win 7 64b Node v0.10.24

Thanks Sign In· View Thread

Re: Drawing

Dennis E White 25-Jul-14 9:06

CS -> BG : FAILED closepopuptoplevel onloadwff.js:77

I think this has something more to do with the CDN where the code is being pulled from. What happens when you try the link to the website where I have it all running??

does the canvas appear on the page when you run it locally??

Sign In· View Thread
Re: Drawing

shermes451 25-Jul-14 10:16
looks the same acts the same Chrome Version 36.0.1985.125 m
Sign In· View Thread
Re: Drawing

Dennis E White 25-Jul-14 9:16

After selecting a pen and a color, moving the mouse around gives a few console errors

Was just thinking about this some more.

have you changed the line where it connects to your server??

maybe it’s security permissions issue?? I have seen similar when trying to cross from one domain to another and have had similar errors.

Sign In· View Thread
Re: Drawing

shermes451 25-Jul-14 10:19

I have not edited anything.

Send me your email and I’ll send a screen shot, otherwise I’ll debug when I get time.
If no one else is having an issue, then probably not worth your time.

Thanks

Sign In· View Thread
Re: Drawing

Dennis E White 25-Jul-14 11:08
I am traveling this weekend to a nodebots event but can look at this on sunday if you are still having problems. Haven’t heard anyone else having this issue but that only means they haven’t said anything.
Sign In· View Thread
Re: Drawing shermes451 25-Jul-14 13:21

Thought I’d let you know, it works in FF 30.0 & IE 11, but not in Opera 23.0.1522.60 or Chrome Version 36.0.1985.125 m At least for me

Sign In· View Thread
Re: Drawing

Dennis E White 28-Jul-14 5:36

That is really weird because I am running that version of Chrome and have not seen that error. You can get my contact information from the following:

UBS3xf7D 24-Jul-14 9:12
Could you provide code download?
Sign In· View Thread
Re: Code. Dennis E White 24-Jul-14 10:54

I did submit a zip package when I originally submitted the article so I will look into why it’s not available. Probably something simple on my end.

Until I get it resolved you can also get the source here[^].

Thanks.

Sign In· View Thread
Re: Code.

UBS3xf7D 24-Jul-14 11:59
Thank you.
Sign In· View Thread
Last Visit: 13-Nov-19 11:27 Last Update: 13-Nov-19 11:27 Refresh 1

General News Suggestion Question Bug Answer Joke Praise Rant Admin


Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

многопользовательское приложение для рисования с html5 canvas socket.io node.js

Я делаю своего рода многопользовательское приложение с html5 canvas, socket.io, node.js. Сейчас я использую широковещательную рассылку для отправки состояния холста другим, но я вижу, что иногда есть гонка: изменение свойств обводки (например, color или lineWidth) в одном пользовательском окне, не всегда равны в другом окне (тогда линия окрашивается свойствами от второго пользователя). Мне кажется, что-то вроде расы или чего-то другого. Может кто-нибудь помочь мне, как синхронизировать это или может дать мне подсказку, как реализовать это по-другому.

1 ответ

Вам необходимо кэшировать свойства для всех пользователей, затем, когда вы собираетесь обрабатывать «событие» от пользователя, вы ищите свойства для этих пользователей (например, lineWidth и color), а затем рисуете «событие».

javascript — приложение многопользовательской краски с html5 canvas socket.io node.js

Я использую многопользовательское приложение с html5 canvas, socket.io, node.js. В настоящее время я использую широковещательную передачу для отправки состояния canvas другим, но я вижу, что иногда существует какая-то гонка: изменение свойств штриха (например, color или lineWidth) в одном окне пользователя, не всегда равным одному и тому же в другом окне (тогда строка окрашивается свойствами от второго пользователя). Мне кажется, что это раса или шх. Может ли кто-нибудь помочь мне, как синхронизировать его или, может быть, дать мне понять, как реализовать его по-другому.

    2 1
  • 2 апр 2020 2020-04-02 19:08:35
  • santBart

1 ответ

Вам нужно кэшировать свойства для всех пользователей, а затем, когда вы собираетесь обработать «событие» от пользователя, вы просматриваете свойства для этих пользователей (например, lineWidth и цвет), затем вы рисуете «событие».

nodejs: Update html5 canvas whiteboard using socket.io

I am trying to create an interactive whiteboard app. What I want it to do is that whatever is drawn on sender.html should get updated on receiver.html but it isn’t working. This is the code —

  • javascript
  • node.js
  • html5
  • canvas
  • html5-canvas

Here easy sample

app.js

sender.html

receiver.html

ж±‡ж™єзЅ‘ж˜ЇдёЂдёЄе­¦д№ жњЂе‰ЌжІїзј–зЁ‹жЉЂжњЇзљ„е№іеЏ°,дє’еЉЁејЏзљ„е­¦д№ е’Ње®ћж—¶ењЁзєїзљ„з»ѓд№ ,иѓЅи®©дЅ иї…йЂџиї›е…ҐзЉ¶жЂЃ,快速掌握知识技能。

Sly777/Multiplayer-Canvas-Paint-tutorial-with-Node.js-Socket.io-and-Node-Static

Multiplayer Canvas Paint tutorial with Node.js, Socket.io and Node-Static. http://blog.ilkerguller.com

(Mobile-Ready) Multiplayer Canvas Paint Tutorial with Node.js, Socket.io and Node-static

This is sample project to show how to create (mobile-ready) multi user canvas application with node.js, socket.io and node-static libraries. Also it shows how to use html5 canvas.

Project Statistics

Sourcerank 3
Repository Size 3.06 MB
Stars 5
Forks 2
Watchers 1
Open issues
Dependencies
Contributors 1
Tags
Created Aug 27, 2012
Last updated Jul 20, 2020
Last pushed Aug 27, 2012

Top Contributors See all

Something wrong with this page? Make a suggestion

Login to resync this repository

Libraries.io helps you find new open source packages, modules and frameworks and keep track of ones you depend upon.

Copyright © 2020 Tidelift, Inc
Code is Open Source under AGPLv3 license
Data is available under CC-BY-SA 4.0 license

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих