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アナリティクスタグは流用しないで下さい。
ディスプレイ広告
ディスプレイ広告