如何修复我的 html/javascript 代码来为精灵表设置动画？
Posted
技术标签:
【中文标题】如何修复我的 html/javascript 代码来为精灵表设置动画？【英文标题】：How do I fix my html/javascript code to animate a sprite sheet? 【发布时间】：2019-05-29 15:16:24 【问题描述】：我尝试使用 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>
我希望输出是一棵树生长的动画，但我得到的是一个空白页。
【问题讨论】：
嗨，如果你能提供一个工作演示会很有帮助，谢谢 jsfiddle.net/prashantram/cbf6syjb/5 这是我想要实现的目标 您的代码错误太多。请打开浏览器的开发工具 JavaScript 控制台。修复你在那里发现的所有错误（首先它会抱怨未定义的变量，然后抱怨不是函数的ctx.draw，然后可能是关于 sourceimage 处于损坏状态等）一旦完成，就该请求帮忙。但是在控制台中抛出此类错误之前，您应该修复它，或者如果您找不到如何修复它，请专门询问有关该错误的问题。
我再次更新了代码并修复了您提到的错误。我没有出现任何错误，它仍然显示一个空白页。
当我说要修复错误时，我并不是要删除引发错误的行。例如，height 仍然是未定义的，现在它被声明并且不会抛出，但你仍然不能在 ctx.clearRect 中使用它，它会使这个调用什么都不做。 ctx.draw 不是一个函数，但你确实需要一些东西来在你的画布上绘制你的图像（它是 ctx.drawImage）等等。
【参考方案1】：
您应该提供更多代码或 sn-p，有几个变量没有显示在您的代码中
如果你使用setInterval很难调试你的代码，你应该确保你的代码可以先工作。
也许你可以一步一步尝试：
-
首先在画布上绘制整个img。如果有效，请继续
手动调用
draw()函数，检查img是否绘制
调用更多，如setTimout(draw, 1000)，查看结果
好的，我认为你可以在drawconsole.log 这些变量@
【讨论】：
我是一个初学者，你能解释一下在画布上绘制整个 img 是什么意思吗？ （我更新了上面的代码） 你需要查看drawImage的文档：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage以上是关于如何修复我的 html/javascript 代码来为精灵表设置动画？的主要内容，如果未能解决你的问题，请参考以下文章
如何从我的 HTML/JavaScript 应用程序中引用 jQuery？