手前味噌。Canvasライブラリ「qCanver」作成中。

もろきゅう。

半年以上前からこつこつと勉強がてら作っていCanvasを扱うためのライブラリ。
ライブラリの名前は、jQueryっぽいくCanvasを文字っててちょっとトンチがきいてそうな名前を考えていて、息子がきゅうり好きなのもあって「qCanver」（これだとキューキャンバーな気がするけど気にしない。）とした。

テストと一部クリアしなきゃいけない不具合とかあるので今は公開はしない。
そのうちする予定。

勉強がてらといったけど、下記本を見ながらCanvasの使い方を勉強しつつ作った。

徹底解説HTML5APIガイドブック ビジュアル系API編

といってもすげー便利なライブラリとかでは全然なくむしろライブラリとか呼ぶのすらおこがましいほど。ただのラッパーです。
なので、基本Canvasを使う上でのメソッドをラップしてメソッドチェーンでかけるようにしただけ。

//idがcanvasのcanvasがある想定。
//普通に書く
var ctx = document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(10, 75);
ctx.lineTo(90, 75);
ctx.fill();

//qCanver使って同じことする
qCanver("canvas")
    .begin(50, 10)
    .line(10, 75)
    .line(90, 75)
    .draw("fill");

というように本当にラップしただけだ。

円書くくらいは1メソッドできるようにまとめた。

//普通にかく
var ctx = document.getElementById("canvas").getContext("2d");
ctx.arc(30, 30, 20, 0, Math.PI * 2, true);
ctx.fill();

//qCanver使って同じことする
qCanver("canvas").fillCircle(30, 30, 20, true);

関数化するとcontextを引数とかで渡さないといけなかったりするけど、

var fillTriangle = function (ctx) {
    this.begin(50, 10)
        .line(10, 75)
        .line(90, 75)
        .draw("fill");
    ctx.fillRect(10, 10, 20, 20);
};
qCanver("canvas").execute(fillTriangle);//qCanver("canvas").draw(fillTriangle)でも同じ

とthisにqCanverオブジェクトに設定して関数を実行できるメソッドを用意した。
さらに第一引数にはcontextが勝手にわたるのでqCanverを使わずに、contextを使って普通にcanvasを書くことも可能。

drawメソッドに引数を渡さないと、オレオレdrawイベントを発火させるようにできる。
オレオレイベントはobserveメソッドで設定。
ボタンクリックしたら表示するようなの書くと。

//fillTriangleはさっきの。
qCanver("canvas").observe("draw", fillTriangle);
document.getElementById("btn").onclick = function () {
    qCanver("canvas").draw();
};

一応、アニメーションも用意した。

// 四角が横に移動して適当なとこで止まるようなの書くと
qCanver("canvas").animate({
    x: 0,
    y: 0,
    offsetX: 5,
    offsetY: 0,
    duration: 50,
    clear: true
}, function (ctx, x, y) {
    this.fillRect(x, y, 10, 10);
    if (x > 100) {
        this.stopAnimate();
    }
});

色を指定するのにrgb(255, 0, 0)みたいに設定するのに

var r = 255;
var g = 0;
var b = 0;
var rgb = "rgb(" + r + "," + g + "," + b + ")";

var r = 255;
var g = 0;
var b = 0;
var rgb = qCanver.toRGBString(r, g, b);

とかする地味なメソッドも用意してる。

そしてこれがこのライブラリ1番のうり？
レイヤー機能を作れる。
内部的には新しいcanvas要素生成して親のcanvas要素にdrawImageで表示してるだけなんだけど。
このやり方は本に載ってたの見て知った。

qCanver("canvas")
    .setLayer("rect1", function () {
        this.fillRect(50, 50, 20, 20);
    })
    .setLayer("circle1", function () {
        this.fillCircle(100, 100, 20, true);
    })
    .drawLayer();

四角と円が表示されるけど、実際は別なcanvas要素に表示している。
アニメーションもできる。
別なcanvasに書いてあると、アニメーションの速度が
それぞれ設定できたりしてよい。

qCanver("canvas")
    .setLayer("rect1", function () {
        this.animate({
            offsetX: 5,
            duration: 50
        }, function (ctx, x, y) {
            this.fillRect(x, y, 20, 20);
        });
    })
    .setLayer("circle1", function () {
        this.animate({
            x: 30,
            offsetY: 5,
            duration: 100
        }, function (ctx, x, y) {
            this.fillCircle(x, y, 20, true);
        });
    })
    .animateLayer();

これ実行すると四角が横にさらっと、円が下にゆっくりと移動していく。

とまあ、こんなのを作っている。

ちなみに開発環境は、
モジュール単位にjsを書いて前はcatするだけのshellを書いて組み立ててたけど、
今は、Makefileつくって1つのjsにまとめてる。
テストはqunitを使っているけど、canvasに円がちゃんと書かれるかのテストとかどうしたらいいか迷ってる。
リポジトリはgitを使っている。

これ書いてたら早く完成させたくなってきたのでがんばることにした。