javascript - 简单的 Canvas 动画: 50x50 image moving across

Question

我以前做过这种编程，但那是很久以前的事了，尽管现在尝试了一段时间，但我无法让它工作。我已经尝试了在互联网上找到的许多其他类似代码，但它们并不完全按照我想要的方式工作!我基本上想要一个 155x55 的 Canvas ，上面有一个 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);

fiddle 链接: https://jsfiddle.net/th6fcdr1/

Answer 1

您遇到的问题是变量x和y始终重置为0和20。您的速度为 1，因此您的 x 始终为 1。

因为您从不更新 x 位置并且总是将其重置为 0。您可以做的是在帧结束时将可变速度增加 1。

speed += 1

首先，您将拥有:

x = 0 + 1

然后

x = 0 + 2

...等等。

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

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

最后，你会得到这个:

posX += speed * elapsedTime
var x = posX