Html5畫布動畫。如何重置矩形當它結束

-1

嘿我試驗一些html5動畫，到目前爲止，我有一個正方形，「跌倒」，只要我按下按鈕。我想知道如何讓它回到頂端，當它觸底並再次跌落時。我當前的代碼是：Html5畫布動畫。如何重置矩形當它結束

<html> 
<head> 
</head> 
<body> 

<canvas id="myCanvas" width="200" height="400" style="border:1px solid black;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 

<script> 
function draw (x,y){ 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.save(); 
var side = 10 
var up = 10 
ctx.clearRect(0,0,200,400); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(x,y,up,side); 
ctx.restore(); 
y += 5; 
var loopTimer = setTimeout('draw('+x+','+y+')',30); 
} 


</script> 
<button onclick="draw(0,0)">draw</button> 
</body> 
</html>

來源

2015-06-14 Reed Johnson

使用的變量y，你可以簡單地檢查它是否是畫布高度的高度以下。

if(y > c.height){ // use the canvas height, not the context height 
    y = 0; 
}

此外，您當前調用計時器的方式有點低效。相反的：

var loopTimer = setTimeout('draw('+x+','+y+')',30);

我會建議

var loopTimer = setTimeout(function(){ draw(x,y); },30);

這裏有一個工作示例：http://jsfiddle.net/vwcdpLvv/

來源

2015-06-14 19:13:05 Andrew

謝謝，這裏小白有點......我會在哪裏把if語句在我的代碼讓它起作用？編輯：剛剛看到你的例子，謝謝！ –

@ReedJohnson如果你看看你在更新位置之後放置的jfiddle。但坦率地說，你可以把它放在繪圖函數的任何地方，它幾乎都可以工作。 --->另外，它應該檢查它是否大於'>'，而不是小於''我必須修復這個錯誤。 – Andrew

嘿！我正在搞這個更多，我想知道如何讓方塊反彈回來......我試圖在if語句中將y = 0改爲y - = 5，但它剛剛開始出現毛刺......任何想法？ –

Html5畫布動畫。如何重置矩形當它結束

回答

相關問題