Canvasで連番画像をコマアニメーション

kimizuka.hatenablog.com

以前の記事 では、

1. imgã‚¿ã‚°
2. backgroundImage

をつかって連番画像をコマアニメーションにしたことがありましたが、今回はCanvasをつかって連番アニメを実行してみようと思います。

DEMO

HTML

<canvas id="canvas"></canvas>

JavaScript

(function(win, doc) {

    "use strict";

    var canvas = doc.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        // アニメーションさせる画像一覧（jsdo.itの仕様上連番にならず）
        srcList = [
            "http://jsrun.it/assets/E/p/P/X/EpPXr.png",
            "http://jsrun.it/assets/4/G/P/8/4GP8k.png",
            "http://jsrun.it/assets/Q/l/E/6/QlE6K.png",
            "http://jsrun.it/assets/y/X/d/v/yXdvw.png",
            "http://jsrun.it/assets/G/N/7/v/GN7vt.png",
            "http://jsrun.it/assets/w/P/D/U/wPDUH.png",
            "http://jsrun.it/assets/S/I/U/G/SIUGn.png",
            "http://jsrun.it/assets/A/F/2/I/AF2IF.png",
            "http://jsrun.it/assets/i/9/d/8/i9d8R.png",
            "http://jsrun.it/assets/y/T/9/o/yT9oL.png",
            "http://jsrun.it/assets/g/a/O/f/gaOfm.png",
            "http://jsrun.it/assets/a/f/e/0/afe0u.png",
            "http://jsrun.it/assets/M/i/Q/b/MiQbB.png",
            "http://jsrun.it/assets/c/n/l/7/cnl7U.png",
            "http://jsrun.it/assets/0/H/S/e/0HSec.png",
            "http://jsrun.it/assets/S/v/b/A/SvbAh.png",
            "http://jsrun.it/assets/k/x/7/B/kx7B9.png",
            "http://jsrun.it/assets/U/i/5/S/Ui5S8.png",
            "http://jsrun.it/assets/Y/j/O/5/YjO52.png",
            "http://jsrun.it/assets/E/J/l/g/EJlgJ.png",
            "http://jsrun.it/assets/C/w/l/n/CwlnC.png",
            "http://jsrun.it/assets/i/F/b/p/iFbpq.png",
            "http://jsrun.it/assets/C/U/A/d/CUAdU.png",
            "http://jsrun.it/assets/0/p/P/j/0pPjh.png",
            "http://jsrun.it/assets/Y/S/f/1/YSf13.png",
            "http://jsrun.it/assets/e/L/8/b/eL8bT.png",
            "http://jsrun.it/assets/Y/8/d/d/Y8ddy.png",
            "http://jsrun.it/assets/u/H/U/s/uHUsy.png",
            "http://jsrun.it/assets/2/S/d/1/2Sd1u.png",
            "http://jsrun.it/assets/W/4/q/6/W4q6P.png",
            "http://jsrun.it/assets/a/b/e/l/abelZ.png",
            "http://jsrun.it/assets/u/j/b/C/ujbC2.png",
            "http://jsrun.it/assets/c/g/5/U/cg5U8.png",
            "http://jsrun.it/assets/E/T/D/e/ETDec.png",
            "http://jsrun.it/assets/w/X/1/g/wX1gr.png",
            "http://jsrun.it/assets/8/v/W/B/8vWBE.png",
            "http://jsrun.it/assets/G/n/S/b/GnSb6.png",
            "http://jsrun.it/assets/2/J/r/v/2Jrvz.png",
            "http://jsrun.it/assets/6/q/j/D/6qjD6.png",
            "http://jsrun.it/assets/q/p/H/Z/qpHZy.png",
            "http://jsrun.it/assets/i/Y/e/X/iYeXt.png",
            "http://jsrun.it/assets/g/F/F/Q/gFFQn.png",
            "http://jsrun.it/assets/E/p/r/W/EprWe.png",
            "http://jsrun.it/assets/u/5/U/w/u5Uwe.png",
            "http://jsrun.it/assets/A/z/2/v/Az2vq.png",
            "http://jsrun.it/assets/u/O/W/T/uOWTU.png",
            "http://jsrun.it/assets/K/b/M/L/KbMLB.png",
            "http://jsrun.it/assets/W/S/U/b/WSUbm.png",
            "http://jsrun.it/assets/K/p/3/7/Kp37z.png",
            "http://jsrun.it/assets/a/Y/R/y/aYRyE.png",
            "http://jsrun.it/assets/G/i/x/q/GixqV.png",
            "http://jsrun.it/assets/O/v/0/h/Ov0hs.png",
            "http://jsrun.it/assets/w/b/y/X/wbyXr.png",
            "http://jsrun.it/assets/0/c/q/T/0cqTE.png",
            "http://jsrun.it/assets/A/f/9/I/Af9IO.png",
            "http://jsrun.it/assets/W/a/6/5/Wa65F.png",
            "http://jsrun.it/assets/G/2/w/X/G2wXz.png",
            "http://jsrun.it/assets/o/b/h/X/obhXG.png",
            "http://jsrun.it/assets/U/Z/a/x/UZaxD.png",
            "http://jsrun.it/assets/Y/M/z/R/YMzRx.png",
            "http://jsrun.it/assets/Y/f/n/E/YfnEn.png"
        ],
        imgList = [],
        length = length = srcList.length,
        count = 0,
        i = 0,
        CANVAS_WIDTH = 450,
        CANVAS_HEIGHT = 150;
    
    _canvasReset();
    _loadImg();
    
    // カンバスのサイズを再代入（描画内容をリセット）
    function _canvasReset() {
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;
    }
    
    // 画像のロード
    function _loadImg() {
        for (var i = 0; i < length; ++i) {
            imgList[i] = new Image(); 
            imgList[i].onload = _handleLoad;
            imgList[i].onerror = _handleLoad; // 一旦エラーは無視
            imgList[i].src = srcList[i];
        }
        
        function _handleLoad() {
            // すべての画像のロードが終わったタイミング
            if (++count === length) {
                _draw();
            }
        }
    }
    
    function _draw() {
        _canvasReset();
        // イメージの描画
        ctx.drawImage(imgList[i], 0, 0);
        i = ++ i % length;
        
        setTimeout(_draw, 1000 / 24);
    }
    
})(this, document);

CSS

#canvas {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    width: 450px; height: 150px;
}

ほとんど画像の読み込みに関する記述ですが、普通に書くとこんな感じじゃないでしょうか。
次回からはこのソースをcreate.jsをつかってすこしずつ書き換えていきたいと思います。