Добавление элементов управления для управления анимацией в холсте Javascript

Я учусь работать с холстом Html5. Как добавить две кнопки, которые уменьшат или увеличат скорость анимационного квадрата в холсте? Я новичок в программировании, поэтому я стараюсь держать его простым.Добавление элементов управления для управления анимацией в холсте Javascript

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="ex1" width="525" height="200" style = "border: 5px solid black;"</canvas> 
    <script> 

    var x = 0; 
    var y = 15; 
    var speed = 10; 

    function animate() { 

    reqAnimFrame = window.mozRequestAnimationFrame || 
      window.webkitRequestAnimationFrame || 
      window.msRequestAnimationFrame  || 
      window.oRequestAnimationFrame 
      ; 

    reqAnimFrame(animate); 

    x += speed; 

    if(x <= 0 || x >= 475) 
     { 
     speed = -speed; 
     } 

    draw(); 
    } 


function draw() { 
var canvas = document.getElementById("ex1"); 
var context = canvas.getContext("2d"); 

context.clearRect(0, 0, 600, 170); 
context.fillStyle = "#ff00ff"; 
context.fillRect(x, y, 40, 40); 
} 

animate(); 
</script> 
<p></p> 
<audio controls> 
    <source src="fortworth.ogg" type="audio/ogg"> 
    <source src="fortworth.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio> 

</body> 
</html>

источник

2013-12-03 Jessica

Вы можете добавить 2 кнопки в HTML так:

<input type="button" value="+" id="btnAdd">

и в JavaScript, привязывает кнопку на событие щелчка, как это:

document.getElementById('btnAdd').addEventListener('click', function(event) { 
//Here you do your logic 
speed++; 
});

Вы делаете то же самое для скорости -;

Edit: Рабочая FIDDLE

источник

2013-12-03 21:59:08 Shryme

Это, кажется, работает, но моя математика неправильно где-то. После нажатия кнопки + 7 раз он перейдет на отрицательное число. Ex я нажимаю + идет до 6,7,8,9,10, а затем перейдет к -9. Смотрите, где я ошибся? – Jessica

Ahhh отрицательное число - это потому, что когда ваш квадрат меняет направление! слева направо, скорость положительная, а справа налево - отрицательная. Я добавил bool, чтобы узнать, когда все будет правильно, посмотрите на мое событие на кнопке, вот где я выгляжу, мне нужно добавить или вычесть: [NEW COOL FIDDLE] (http://jsfiddle.net/xS4j2/) – Shryme

I просто хочу добавить, что отрицательный результат был нормальным, потому что вы делали скорость = -скоростной; – Shryme

Добавление элементов управления для управления анимацией в холсте Javascript

ответ

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