如何修复我的 html/javascript 代码以动画精灵表？

Question

我尝试使用 html 和 javascript 为精灵表制作动画，但无济于事。 这是我的精灵表

下面是我的代码的第 36-59 行。 我没有收到任何错误，所以我真的不知道出了什么问题。 如何修复/改进我的代码？

这是我正在做的一个项目。 我尝试过使用我在网上找到的不同方法，但都没有真正奏效。 我也尝试过移动图像。

<html>
    <head>
        <title>Tree Animation</title>
    </head>

    <body>

        <canvas id='canvas'></canvas>

        <script>

            var canWidth = 400;
            var canHeight = 100;

            //position where the frame will be drawn
            var x = 0;
            var y = 0;

            var srcX;
            var srcY;

            var sheetWidth = 230;
            var sheetHeight = 79;

            var frameCount = 5;

            var width = sheetWidth/frameCount;
            var height;

            var currentFrame = 0;

            var tree = new Image();
            tree.src = "tree sprite.jpg"

            var canvas = document.getElementById('canvas');
            canvas.width = canWidth;
            canvas.height = canHeight;

            var ctx = canvas.getContext('2d');

            function updateFrame(){
                currentFrame = ++currentFrame%frameCount

                srcX = currentFrame*width;
                srcY = 0;

                ctx.clearRect(x, y, width, height);
            }

            function draw(){
                updateFrame();

            }

            setInterval(function(){
                draw();
            }, 100);

        </script>

    </body>
</html>

我希望输出是一棵树生长的动画，但我得到的是一个空白页面。

Answer 1

你应该提供更多的代码或片段，有几个变量没有出现在你的代码中

如果您使用 setInterval，则很难调试您的代码，您应该首先确保您的代码可以工作。

也许你可以一步一步地尝试：

首先在画布上绘制整个 img。 如果有效，下一步
手动调用draw()函数，检查 img 是否绘制
调用更多，比如setTimout(draw, 1000) ，查看结果

好的，我想你可以在draw console.log这些变量

如何修复我的 html/javascript 代码以动画精灵表？

问题描述

1 个解决方案

解决方案1
-1 2019-01-03 03:01:53

如何修复我的 html/javascript 代码以动画精灵表？

问题描述

1 个解决方案

解决方案1 -1 2019-01-03 03:01:53

解决方案1
-1 2019-01-03 03:01:53