简单的画布动画：移动过的50x50图片

我之前已经完成了这种编程，但是很久以前，尽管现在尝试了一段时间，但我无法得到它的工作。我已经尝试了大量在互联网上找到的其他类似代码，但它们并不按照我想要的方式工作！我基本上想要一个155x55的画布，一个50x50的图片在它上面移动，很简单！尽管听起来有多简单......我正在努力......我试着调整我以前的代码，但那是为了弹跳球，而且很久以前。我会感谢任何帮助。谢谢！简单的画布动画：移动过的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/

来源

2016-12-20 James

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

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

由于您从不更新x的位置并始终将其重置为0。你可以做的是在帧尾增加1的变速。

speed += 1

首先，你必须：

x = 0 + 1

然后

x = 0 + 2

...等等。

然后你必须检查speed是上述150和复位speed为1

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

最后，你有这样的：

posX += speed * elapsedTime 
var x = posX

来源

2016-12-20 19:23:24

你真实的mvp – James

简单的画布动画：移动过的50x50图片

回答

相关问题