如何修复我的html/javascript代码来设置精灵工作表的动画？_Javascript_Html_Css_Sprite_Sprite Sheet

如何修复我的html/javascript代码来设置精灵工作表的动画？

javascript html css

如何修复我的html/javascript代码来设置精灵工作表的动画？,javascript,html,css,sprite,sprite-sheet,Javascript,Html,Css,Sprite,Sprite Sheet,我试图用html和javascript制作一个精灵表单的动画，但没有成功。这是我的雪碧床单下面是我的代码第36-59行。我没有收到任何错误，所以我真的不知道出了什么问题。如何修复/改进代码这是我正在做的一个项目。我尝试过使用我在网上找到的不同方法，但也没有一种真正有效。我也尝试过改变图像 <html> <head> <title>Tree Animation</title> </head>

我试图用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>


树动画
var-canWidth=400；
var-canHeight=100；
//将绘制框架的位置
var x=0；
var y=0；
var-srcX；
var-srcY；
宽度=230；
高度=79；
var frameCount=5；
变量宽度=纸张宽度/帧数；
变异高度；
var currentFrame=0；
var tree=newimage（）；
tree.src=“tree sprite.jpg”
var canvas=document.getElementById（'canvas'）；
canvas.width=canWidth；
canvas.height=canHeight；
var ctx=canvas.getContext（'2d'）；
函数updateName（）{
currentFrame=++currentFrame%frameCount
srcX=当前帧*宽度；
srcY=0；
ctx.clearRect（x，y，宽度，高度）；
}
函数绘图（）{
updatename（）；
}
setInterval（函数（）{
draw（）；
}, 100);

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

您应该提供更多的代码或片段，有几个变量没有显示在您的代码中

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

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

首先在画布上绘制整个img。如果成功了，就下一步

手动调用

draw（）

函数，检查img是否已绘制

调用更多，例如

setTimout（draw，1000）

，检查结果

好的，我想你可以

控制台。把这些变量记录在绘图中
嗨，如果你能提供一个有效的演示会很有帮助，谢谢，这正是我想要实现的。你的代码中错误太多了。请打开浏览器的开发工具javascript控制台。修复您在那里发现的所有错误（首先它会抱怨未定义的变量，然后是针对ctx.draw
这不是一个函数，然后可能是关于sourceimage处于损坏状态等）。一旦完成此操作，将是寻求帮助的时候了。但是，在控制台中出现此类错误之前，您应该修复它，或者在找不到如何修复错误的情况下专门询问有关错误的问题。我再次更新了代码并修复了您提到的错误。我没有显示错误，它仍然显示一个空白页。当我说要修复错误时，我的意思不是删除抛出错误的行。例如，height
仍然是未定义的，现在它已声明并且不会抛出，但仍然不能在ctx.clearRect中使用它，它将使此调用不起任何作用ctx.draw
不是一个函数，但是你确实需要一些东西来在画布上绘制图像（它是ctx.drawImage
）等等。我是个初学者，你能解释一下在画布上绘制整个img是什么意思吗？（我更新了上面的代码）您需要检查drawImage
的文档：