【JavaScript】canvasでお絵かきしたい（半分自作する編）
問題
canvasを使ったお絵かき機能を作りたいです。
出来合いのライブラリもあるみたいだけど、ライブラリのお世話になるのはなるべく最小限にしたいです。
答え
canvasの操作はEaselJSを使ってみる。他の部分は自作する方向で。
canvasそのものは複数の描画オブジェクトを管理できたり、レイヤー操作ができたりするわけでなく、1枚のビットマップ画像を管理しているだけ。
マウスでお絵かきするときの1画目、2画目、3画目……を管理するには、各ストロークや絵の部品を表すデータ（色、形、塗り、線の太さ…）をcanvas上ではないところで管理して、そのデータをもとにcanvasに描画するといった感じの流れになる。そのあたりの処理は、各種のcanvas操作のライブラリがやってくれる。
もし素のcanvasの操作方法を知らなくても、ライブラリの使い方に従っていれば、canvas上に図形が表示される。
easeljsを使えるようにする
easeljsをダウンロードして、読み込む。https://github.com/CreateJS/EaselJS/tags などからダウンロード。
CDNも提供されているので、お試しにはこれも手軽でよい。
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
jQueryには依存していない。
easeljsでさっそくマウスでお絵かき
後どうするかというと、「マウス操作のイベントの組み込み方」、「マウスの操作にしたがって絵の部品を作っていく処理」、「絵の部品が増えたらcanvasの表示を更新する処理」など、ライブラリの使い方にしたがって組み込んでいくことになる。考えても仕方ない。
デモは、線は角丸5px、色は黒#000000固定で作ってある。
Demo ↓ ここ描けます
JavaScript
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script>
var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
function init() {
canvas = document.getElementById("myCanvas");
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
stage.addChild(drawingCanvas);
stage.update();
}
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function handleMouseDown(event) {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt;
stage.addEventListener("stagemousemove" , handleMouseMove);
}
function handleMouseMove(event) {
var midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
drawingCanvas.graphics.clear().setStrokeStyle(5, 'round', 'round').beginStroke('#000000').moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
}
function handleMouseUp(event) {
stage.removeEventListener("stagemousemove" , handleMouseMove);
}
window.onload=init;
</script>
さらに作りこんでいくなら、線の色変更、太さ変更、canvasのサイズ変更、取り消し（アンドゥ、Ctrl+z）、やり直し（リドゥ）、丸・三角・四角などの図形描画、画像挿入、各種ブラシ、画像として保存する機能（右クリックの「名前をつけて画像を保存」でできたりもするが）など、つけてみたい機能はたくさん思いつきますね。
メモ
だいぶ前にeaseljsを使ったことがあって、今改めてメモしておこうと思ったら、バージョンが0.4から0.6になっていて、古い書き方では0.6は動きませんでした。使い方がだいぶ変わっていました。
コメント