javascript - Canvas 内的人类条纹动画

我的jsfiddle:
http://jsfiddle.net/yKvuK/

如您所见，当人类行走时，图像仍保留在原处。我可以更改代码，以便当我向左按图像时，更改其位置，看起来就像在向左行走，而不仅仅是在原地行走？

            function update() {
            canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);
            if (keydown.left) {
                    CurentPos++;
                    if (CurentPos == ImgNumb) {
                        CurentPos = 0;
                    }
            }
        } // end update

最佳答案

试试这个 fiddle :

http://jsfiddle.net/yKvuK/1/

基本上，每次更改框架时，“left”变量都会减少，因此他向左移动。

 // I draw the "init" picture at x=250, so he has more space to walk.

 var left = 250;

 function update() {
     canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);
     if (keydown.left) {
         CurentPos++;
         if (CurentPos == ImgNumb) {
             CurentPos = 0;
         }
         left -= 5; // <----
     }
 } // end update

 ...
 ...


 function draw() {
     canvas.drawImage(characterImg, CurentPos * 64, 0, 64, 64, left, 200, 64, 64);
 }

顺便说一句，我从未见过/使用过 Canvas 。看起来我很幸运地选择了正确的变量:P

关于javascript - Canvas 内的人类条纹动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17991641/