画布内的人体条纹动画

human stripes animation inside canvas

本文关键字：动画 布内      更新时间：2023-09-26

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

正如你所看到的，当人类行走时，图像保持在原来的位置。我可以更改代码吗？这样，当我向左按时，图像会改变它的位置，看起来像是向左行走，而不仅仅是原地行走？

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

试试这个小提琴：

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);
 }

顺便说一句，我从来没有见过/用过画布。看起来我只是幸运地选择了正确的变量：P

这将起作用：FIDDLE

使用你的x变量（而不是添加新的），你也可以在向右移动时使用它。将其添加到update()中。

if (keydown.left) {
    CurentPos++;
    x -= 3;  // I used 3 but increase this to move faster
    if (CurentPos == ImgNumb) {
         CurentPos = 0;
    }
}

和

canvas.drawImage(characterImg, CurentPos * 64, 0, 64, 64, 200 + x, 200, 64, 64);
相关文章：