drawingboard.js:ブラウザにお絵描きボードを実装できるJs



ブラウザにお絵描きソフト的なボードを実装してみます。

ブラウザの種類やバージョンによっては表示されませんでした。
(IEは表示され無い様です)

1.読込むCSSファイルと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>

2.HTMLの記述例

以下はデフォルトの設定で色々カスタムができる様です。

<div class="example" data-example="1">
	<div class="board" id="default-board"></div>
</div>

3.読込むJsファイルとJavaScriptの記述例

<script src="http://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>

</body>

drawingboard.js:ブラウザにお絵描きボードを表示するデモ

ソース元:Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

過去にFlashサイトでお絵描きコンテンツを見かけましたが、
これはスマホ(iPhone)で見てもお絵描き出来る様なので、
描いたものを使って画像の共有やメモ書きツール等に使えそうですね。