我以前做过这种编程,但是很久以前了,尽管现在尝试了一段时间,但我还是无法完成这项工作。我已经尝试了许多其他类似代码,这些代码在Internet上找到了,但是它们并不能完全按照我想要的方式工作!我基本上想要一个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/

最佳答案

您遇到的问题是变量xy始终重置为020。您的速度为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

10-07 19:21
查看更多