簡單的畫布動畫：移動過的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圖片

回答

相關問題