Перемещение объекта в холсте

Я застреваю в точке, которую я не знаю, что делать. Я изучаю основы использования элемента canvas, поэтому я дал себе небольшое задание. Я хочу разместить круг на холсте, который можно нажать вперед, нажав кнопку. Поэтому каждый раз, когда нажимается кнопка, круг должен двигаться вперед 10 пикселей. Но теперь я застрял некоторое время, и я не могу понять, что я делаю неправильно. (Я также новичок в программировании в javascript и программировании).Перемещение объекта в холсте

Это код, который я до сих пор

<html> 
<head></head> 
<body> 
<button onclick="animationStep()" id="startAnimation" style="width:200px; height:50px; color:"green";">Press here to move</button> 
<canvas id="myCanvas" width="500" height="300" 
     style="border: 1px dotted black"> 
</canvas> 
<script> 


    function drawDisc(x,y,r) { 
     theContext.beginPath(); 
     theContext.arc(x,y,r,0,Math.PI*2,false); 
     theContext.closePath(); 
     theContext.fill(); 
    } 

    function startDrawing(canvasId) { 
     var canvasElement = document.getElementById(canvasId); 
     var drawingContext = canvasElement.getContext("2d"); 
     return drawingContext; 
    } 

    var theContext = startDrawing("myCanvas") 

    var x = 100; 

    function animationStep(){ 
     while(x <= 400) { 
      x = x + 10; 
      theContext.clearRect(0,0,500,300); 
      drawDisc(x, 100, 30); 
      console.log("animated"); 
     } 
    } 
</script> 
</body> 
</html>

Когда я смотрю в лог консоли, он сразу же выполнить анимацию в 36 раз. Я думаю, что он застрял в цикле while, но я не могу понять, как заставить это работать правильно. Может, я пропустил что-то простое?

спасибо что!

источник

2014-09-21 Tom Luijten

Избавьтесь от цикла while.

Так

function animationStep(){ 
    while(x <= 400) { 
     x = x + 10; 
     theContext.clearRect(0,0,500,300); 
     drawDisc(x, 100, 30); 
     console.log("animated"); 
    } 
}

должен быть

function animationStep(){ 
     x = x + 10; 
     theContext.clearRect(0,0,500,300); 
     drawDisc(x, 100, 30); 
     console.log("animated"); 
}

источник

2014-09-21 14:29:54 mgamba

Это сделал это! Вау, это было бы так просто. Была ли проблема, что мой код висел в цикле while и показал только «последний» возможный цикл? –

Ваш цикл while увеличивается на x до 410, и когда вы вызываете его во второй раз, цикл while ничего не делает, потому что x больше 400. –

Эй, я вижу, вы новичок в SO. Если вы чувствуете, что ответ решил проблему, отметьте ее как «принятую», нажав зеленую галочку. Это помогает сосредоточиться на более старых SO, которые до сих пор не имеют ответов. – mgamba

Перемещение объекта в холсте

ответ

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