Question

嘿我正在尝试一些html5动画，到目前为止，我有一个广场，＃34;跌倒＆＃34;每当我按下按钮。我想知道当它撞到底部并再次下降时我怎么能回到顶部。我目前的代码是：

<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>

Answer 1

使用变量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);

我会推荐

Objects

以下是一个有效的例子：http://jsfiddle.net/vwcdpLvv/

Html5画布动画。如何在矩形结束时重置矩形

1 个答案: