Skip to content

Aoinu/WebCanvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

WebCanvas

ブラウザお絵かき共有アプリ

説明

node.jsを用いて複数人が同じキャンバスに絵を描くことが出来るようにしたwebアプリケーション。 現状劣化版ピクトセンス。 描いたイラストをPNG形式でダウンロードする機能も搭載されているが、ブラウザ依存。 ぼっちなので実際に複数人で操作して問題なく動作するかどうかは未確認。 (複数クライアントで一応同じように描画されることを簡単に確認したのみ。)

使い方

  • npm install socket.ioしてからnode appで動くはずです。

ボーダー付きの矩形がキャンバス。ココにカーソルをドラッグさせて絵を描く。 隣は簡素なチャット欄。名前、メッセージを入力して送信すると全体に送信され、下の矩形内に表示される。 キャンバス下のスライダーで色とペンサイズを変更できる。 「消去」ボタンでキャンバスを白紙に戻す。(現時点では自分のキャンバスしか初期化されない) 「保存」ボタンでその時のキャンバスが下のギャラリーに一時保管される。 ギャラリーの画像をクリックするとPNG形式の画像としてダウンロードできる。

##TODO

  • 「消去」ボタンの機能を接続しているクライアント全体にも適用させる
  • スライダーが若干使いづらいので修正する
  • ルーム機能を実装する

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published