怎么用canvas实现spritesheet人物奔跑？

Question

像这样一个图片，怎么用canvas把动作都衔接起来，让他跑起来？

Answer 1

终于看到个我可以回答的。
这是基本的canvas绘图吧，把每一张图片的位置找好了，然后translate就可以了，然后每次渲染图片需要擦除一次画布。
大概代码如下

  var canvasDom = document.querySelector("canvas");
    var btnStop = document.querySelector("#btnStop");
    var painting = canvasDom.getContext("2d");


//    在Canvas中引入外部的图片

//    创建img的DOM
//    HTML5中可以使用 ：  imgDom = new Image();
    var imgDom = document.createElement("img");

    var i = 1;
    var speed = 50;

    var handler = setInterval(function(){
        painting.clearRect(0, 0, 1000, 500);
        imgDom.src = "img/q_r"+i+".jpg";
//        图片加载完毕后，再显示图片
        imgDom.onload = function(){
            painting.drawImage(imgDom, speed, 150);
        }


        i++;
        if(i>8){
            i = 1;
        }

        speed = speed + 50;
        if(speed > 1000){
            speed = 50;
        }

    }, 200);


    btnStop.onclick = function(){
        clearInterval(handler);
    }

Answer 2

最简单的就是设置定时器，间隔的改变图片位置，只漏出‘一只’马