【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は動きませんでした。使い方がだいぶ変わっていました。