HTML5のcanvasでお絵かきツール！簡単な作り方を書いておきます！②
サクウェブＴＶはコチラ↓↓↓
次に、以下のようにHTMLの<head></head>内でjQueryと一緒に読み込みます。
先ほど作ったdraw.jsというプラグインを実際に使用するスクリプトを記述するために、
script.jsをいうファイルも作成して読みこんでおきます。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="draw.js"></script> <script type="text/javascript" src="script.js"></script>
読み込む順番は上の通りにしてください。
ちなみに、src=""の中のパスは実際のディレクトリ構成にしたがって正しく指定してください。
では、以下のHTMLがあるとして、ここにお絵かきツールを超簡単に出現させます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script tyle="text/javascript" src="jquery.js"></script> <script tyle="text/javascript" src="draw.js"></script> <script tyle="text/javascript" src="script.js"></script> <title>Draw</title> </head> <body> <div id="box"> //ここにお絵かきツールを出現させます </div> </body> </html>
今回はid="box"と指定したdivタグにお絵かきツールを出現させます。
やり方は、script.jsに以下を記述するだけです。
$(function(){
$.drawPic($("#box"));
});
はい。これだけで、結構高機能なお絵かきツールが出現します。
実行結果は次の記事で動画で貼り付けておきますのでご覧ください。
