canvasのコードを見やすくしよう！

明けましておめでとうございます。
本年もどうぞよろしくお願いいたします。

さて、
今年から閃光部（フロントエンド）を離れ
意匠部（デザイン）の所属になるのですが
そうなるとすぐJS忘れちゃいそうで。。。

というわけで忘れないようにブログ始めます！

最初の投稿はcanvasのお話。

canvasで複雑なパスを描こうとすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
ctx.save();
for (var i = 8; i--;) {
    ctx.rotate(45 * Math.PI / 180);
    ctx.moveTo(0, -50);
    ctx.lineTo(0, -80);
}
ctx.restore();
ctx.save();
ctx.translate(-50, 100);
ctx.save();
ctx.translate(0, 0);
ctx.moveTo( 0,  0);
ctx.lineTo(20,  0);
ctx.lineTo(20, 20);
ctx.lineTo( 0, 20);
ctx.lineTo( 0, 40);
ctx.lineTo(20, 40);
ctx.restore();
ctx.save();
ctx.translate(30, 0);
ctx.moveTo( 0,  0);
ctx.lineTo(20,  0);
ctx.lineTo(20, 40);
ctx.lineTo( 0, 40);
ctx.lineTo( 0,  0);
ctx.restore();
ctx.save();
ctx.translate(60, 0);
ctx.moveTo( 0, 10);
ctx.lineTo(10,  0);
ctx.lineTo(10, 40);
ctx.moveTo( 0, 40);
ctx.lineTo(20, 40);
ctx.restore();
ctx.save();
ctx.translate(85, 0);
ctx.moveTo(20, 40);
ctx.lineTo(20,  0);
ctx.lineTo( 0, 30);
ctx.lineTo(25, 30);
ctx.restore();
ctx.restore();
ctx.stroke();

}(this, document));

見づらい(T_T)

でも、これを save() / restore() の対でインデントすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
ctx.save();
    for (var i = 8; i--;) {
        ctx.rotate(45 * Math.PI / 180);
        ctx.moveTo(0, -50);
        ctx.lineTo(0, -80);
    }
ctx.restore();
ctx.save();
    ctx.translate(-50, 100);
    ctx.save();
        ctx.translate(0, 0);
        ctx.moveTo( 0,  0);
        ctx.lineTo(20,  0);
        ctx.lineTo(20, 20);
        ctx.lineTo( 0, 20);
        ctx.lineTo( 0, 40);
        ctx.lineTo(20, 40);
    ctx.restore();
    ctx.save();
        ctx.translate(30, 0);
        ctx.moveTo( 0,  0);
        ctx.lineTo(20,  0);
        ctx.lineTo(20, 40);
        ctx.lineTo( 0, 40);
        ctx.lineTo( 0,  0);
    ctx.restore();
    ctx.save();
        ctx.translate(60, 0);
        ctx.moveTo( 0, 10);
        ctx.lineTo(10,  0);
        ctx.lineTo(10, 40);
        ctx.moveTo( 0, 40);
        ctx.lineTo(20, 40);
    ctx.restore();
    ctx.save();
        ctx.translate(85, 0);
        ctx.moveTo(20, 40);
        ctx.lineTo(20,  0);
        ctx.lineTo( 0, 30);
        ctx.lineTo(25, 30);
    ctx.restore();
ctx.restore();
ctx.stroke();

}(this, document));

見やすい！

さらに beginPath() と stroke() の対もインデントすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
    ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
    ctx.save();
        for (var i = 8; i--;) {
            ctx.rotate(45 * Math.PI / 180);
            ctx.moveTo(0, -50);
            ctx.lineTo(0, -80);
        }
    ctx.restore();
    ctx.save();
        ctx.translate(-50, 100);
        ctx.save();
            ctx.translate(0, 0);
            ctx.moveTo( 0,  0);
            ctx.lineTo(20,  0);
            ctx.lineTo(20, 20);
            ctx.lineTo( 0, 20);
            ctx.lineTo( 0, 40);
            ctx.lineTo(20, 40);
        ctx.restore();
        ctx.save();
            ctx.translate(30, 0);
            ctx.moveTo( 0,  0);
            ctx.lineTo(20,  0);
            ctx.lineTo(20, 40);
            ctx.lineTo( 0, 40);
            ctx.lineTo( 0,  0);
        ctx.restore();
        ctx.save();
            ctx.translate(60, 0);
            ctx.moveTo( 0, 10);
            ctx.lineTo(10,  0);
            ctx.lineTo(10, 40);
            ctx.moveTo( 0, 40);
            ctx.lineTo(20, 40);
        ctx.restore();
        ctx.save();
            ctx.translate(85, 0);
            ctx.moveTo(20, 40);
            ctx.lineTo(20,  0);
            ctx.lineTo( 0, 30);
            ctx.lineTo(25, 30);
        ctx.restore();
    ctx.restore();
ctx.stroke();

}(this, document));

もっと見やすい！！

このお正月、<canvas>でゴニョゴニョする際はぜひお試しください。