ブラウザお絵かき共有アプリ
node.jsを用いて複数人が同じキャンバスに絵を描くことが出来るようにしたwebアプリケーション。 現状劣化版ピクトセンス。 描いたイラストをPNG形式でダウンロードする機能も搭載されているが、ブラウザ依存。 ぼっちなので実際に複数人で操作して問題なく動作するかどうかは未確認。 (複数クライアントで一応同じように描画されることを簡単に確認したのみ。)
npm install socket.io
してからnode app
で動くはずです。
ボーダー付きの矩形がキャンバス。ココにカーソルをドラッグさせて絵を描く。 隣は簡素なチャット欄。名前、メッセージを入力して送信すると全体に送信され、下の矩形内に表示される。 キャンバス下のスライダーで色とペンサイズを変更できる。 「消去」ボタンでキャンバスを白紙に戻す。(現時点では自分のキャンバスしか初期化されない) 「保存」ボタンでその時のキャンバスが下のギャラリーに一時保管される。 ギャラリーの画像をクリックするとPNG形式の画像としてダウンロードできる。
##TODO
- 「消去」ボタンの機能を接続しているクライアント全体にも適用させる
- スライダーが若干使いづらいので修正する
- ルーム機能を実装する