我以前做过这种编程,但是很久以前了,尽管现在尝试了一段时间,但我还是无法完成这项工作。我已经尝试了许多其他类似代码,这些代码在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/
最佳答案
您遇到的问题是变量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