2013年10月23日

おえかきボードで簡単お絵かき

ふと『Drawingboard.js』というJavaScriptのソフトウェアを見かけた。お約束のjQueryを利用しており、ウェブサイト上で簡単におえかきボード機能を提供してくれるというものだ。

これは面白そうということで、早速「おえかきボード」という簡単なウェブサイトを作成してみた。

oekaki_gamen20131023.png
http://oekaki.natureblue.com

今回はあまり凝るつもりはなかったので『Drawingboard.js』をダウンロードしてきて参照し、ボタンの表記やデザインを少し変えて、おまけでキャンバスサイズの変更や印刷機能をプラスしてみた。全体のデザインも画像を少し作っただけで速攻で済ませた。

この『Drawingboard.js』のなかなか面白いところは、適当な画像をドラッグ&ドロップして取り込むことが出来るところだ。例えば下記のように写真をドラッグして取り込み、適当に落書きも出来る。でもって最後にダウンロードを実行すれば落書き画像の出来上がりだ。
oekaki_gamen20131023_2.png

ちなみにFirefoxやChrome、Safariの最新版では正常に動作することを確認したけど、WindowsXPのIE8では動作しなかった。Windows7のIE10なら動作するようだ。やはり環境によってうまく動いたり動かなかったりがあるみたい。
posted by みっちー at 23:17 | Comment(0) | TrackBack(0) | ウェブ・HP


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/78958639
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック