简单的画布动画：50x50 图像移动答案

【问题标题】：Simple canvas animation: 50x50 image moving across简单的画布动画：50x50 图像移动
【发布时间】：2017-05-06 02:30:22
【问题描述】：

我以前做过这种编程，但那是很久以前的事了，尽管现在尝试了一段时间，但我无法让它工作。我已经尝试了很多其他类似的代码，这些代码是我在互联网上找到的，但它们并不能完全按照我想要的方式工作！我基本上想要一个 155x55 的画布，上面有一个 50x50 的图像，很简单！尽管它听起来很简单......我正在努力......我已经尝试过调整我以前的代码，但那是为了弹跳球，这是很久以前的事了。我会很感激任何帮助。谢谢！

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

var speed = 1;

a = new Image();
a.src = "http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif";

function frameRate(fps) {
timer = window.setInterval( updateCanvas, 1000/fps );
}


function updateCanvas() {
ctx.fillRect(0,0, myCanvas.width, myCanvas.height);
draw();
}

function draw() {
/* Add code here to randomly add or subtract small values
* from x and y, and then draw a circle centered on (x,y).
*/

var x = 0 + speed;
var y = 20;  

if (x > 150) {
x == 1;
}

ctx.beginPath();
ctx.drawImage(a,x,y,100,100); 
}

/* Begin animation */
frameRate(25);

小提琴链接： https://jsfiddle.net/th6fcdr1/

【问题讨论】：

你真的想用代码来做这个吗？就个人而言，这是我在 CSS 中使用 transform translate 所做的那种事情。

标签： javascript jquery html animation canvas

【解决方案1】：

您遇到的问题是您的变量x 和y 总是重置为0 和20。你的速度是1，所以你的x总是1。

因为您从不更新 x 位置并始终将其重置为 0。您可以做的是在帧结束时将变速速度提高1。

speed += 1

首先，您将拥有：

x = 0 + 1

然后

x = 0 + 2

...等等。

然后您必须检查speed 是否高于150 并将speed 重置为1。

然后我建议将speed 重命名为posX，这样更准确。此外，您应该使用requestAnimationFrame()，而不是使用setInterval。而不是将posX 增加1，您应该将posX 增加speed * elapsedTime 以获得流畅的移动和稳定的速度移动，而不依赖于帧速率。

最后，你会得到这个：

posX += speed * elapsedTime
var x = posX

【讨论】：

你是真正的mvp