Question

之前我已经完成了这种编程，但很长一段时间以来，尽管现在尝试了一段时间，我仍然无法使其工作。我已经尝试过我在互联网上找到的其他类似代码，但它们的工作方式与我想要的完全不同！我基本上想要一个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/

Answer 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

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

1 个答案: