繪製序列幀動畫

HTML5 Canvas動畫效果演示

  首先要準備一張有連續幀的圖片，然後利用HTML5 Canvas的draw方法在不同的時間間隔繪製不同的幀，這樣看起來就像動畫在播放。

<div id="cantainer">
    <canvas id="cavsElem">

    </canvas>
</div>
<button id="btn-dir-left">←</button>
<button id="btn-dir-right">→</button>
<button id="btn-dir-up">↑</button>
<button id="btn-dir-down">↓</button>

準備四個按鈕，分別是：左、右、上、下。

<script>
    (function(){
        var canvas = document.querySelector("#cavsElem");
        var ctx = canvas.getContext("2d");
        canvas.width = 600;
        canvas.height = 400;
        canvas.style.border = "1px solid #000";

        var dirIndex = 0;

        var img = new Image();
        img.src = "imgs/gameImgs/DMMban.png";
        img.onload = function(){
            var frameIndex = 0;
            setInterval(function(){
                //清楚之前的 圖片墨跡
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(
                        img
                        ,frameIndex * 40  //獲取原始圖片的x座標
                          ,dirIndex * 65    //獲取原始圖片的y座標
                          ,40 
                        ,65
                        ,200
                        ,200
                        ,80
                        ,130
                );
                frameIndex++;//添加到下一幀
                frameIndex %= 4;//0%4=0;1%4=1;2%4=2;3%4=3;4%4=0
            }, 1000 / 10);
        };

        //綁定點擊按鈕事件
        var btnLeft = document.getElementById("btn-dir-left");
        btnLeft.onclick = function(){
            //朝左跑
            dirIndex = 1;
        };
        var btnRight = document.getElementById("btn-dir-right");
        btnRight.onclick = function(){
            //朝右跑
            dirIndex = 2;
        };
        var btnUp = document.getElementById("btn-dir-up");
        btnUp.onclick = function(){
            //朝上跑
            dirIndex = 3;
        };
        var btnDown = document.getElementById("btn-dir-down");
        btnDown.onclick = function(){
            //朝下跑
            dirIndex = 0;
        };
    }());
</script>