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

Спасибо, немного нуб здесь ... Где бы я поставил, если заявление в своем коде сделай так, чтоб это работало? Редактировать: просто увидел ваш пример, спасибо! –

@ReedJohnson Если вы посмотрите на jfiddle, я поставлю его после того, как вы обновите позицию. Но, честно говоря, вы могли бы поместить его в любую точку розыгрыша, и он будет работать почти все равно. ---> Кроме того, предполагается, что он больше, чем '>', не меньше, чем '<' Я должен был исправить эту ошибку. – Andrew

Эй! Я немного возился с этим, и мне было интересно, как вернуть квадрат обратно ... Я попытался изменить y = 0 на y - = 5 в выражении if, но он только начал срываться ... любые идеи? –

Html5 холст анимация. Как сбросить прямоугольник, когда он достиг цели

ответ

Смежные вопросы