Question

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

下面是我的代码的第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)，检查结果

好的，我想您可以在console.log

中draw

如何修复html / javascript代码以对子画面进行动画处理？

1 个答案: