drawingboard.jsを使ってブラウザにマウスで楽しめるお絵描きボードを実装する方法をご紹介します。
ブラウザにお絵描きソフト的なボードを実装してみます。
(古いブラウザバージョンや種類によっては表示されません)
Contents
ディスプレイ広告
ブラウザにマウスで楽しめるお絵描きボードを実装するCSSの記述
※drawingboard.cssファイルを読み込みます。その他は必要に応じて変更して下さい。
<link rel="stylesheet" href="css/drawingboard.css"> <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } .board { margin: 0 auto; width: 300px; height: 300px; } #default-board { width: 700px; height: 400px; } --> </style>
ブラウザにマウスで楽しめるお絵描きボードを実装するHTMLの記述
※お絵描きボードエリア(id=”default-board”)を用意します。id=”default-board”はデフォルトの設定です。ボードは色々カスタムができる様です。
<h1>マウスを使ってお絵描きができます。<br/> ボードの上のツールで色・線幅変更・消しゴム等が行えます。</h1> <div class="example" data-example="1"> <div class="board" id="default-board"></div> </div>
drawingboard.jsを使ってブラウザにマウスで楽しめるお絵描きボードを実装するJavaScriptの記述
※jquery-1.10.1.min.js、drawingboard.js、board.js、control.js、color.js、drawingmode.js、navigation.js、size.js、download.js、utils.jsファイルを読み込みます。DrawingBoard.Board(お絵描きボードエリア)を設定します。その他の設定は以下「ソース元」をご参考下さい。
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/drawingboard.js"></script> <script src="js/board.js"></script> <script src="js/controls/control.js"></script> <script src="js/controls/color.js"></script> <script src="js/controls/drawingmode.js"></script> <script src="js/controls/navigation.js"></script> <script src="js/controls/size.js"></script> <script src="js/controls/download.js"></script> <script src="js/utils.js"></script> <script data-example="1"> var defaultBoard = new DrawingBoard.Board('default-board'); </script>
drawingboard.js:ブラウザにお絵描きボードを表示するデモページ
drawingboard.js:ブラウザにお絵描きボードを表示するデモ
ソース元:Drawingboard.js
ソース元:Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。