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画布动画。如何重置矩形当它结束

回答

相关问题