캔버스에서 움직이는 물체

나는 무엇을해야할지 모르겠다. 저는 캔버스 요소를 사용하는 기본 사항을 배우기 때문에 약간의 숙제를했습니다. 나는 버튼을 눌러 앞으로 밀 수있는 원을 캔버스에 놓고 싶습니다. 버튼을 누를 때마다 원이 앞으로 10 픽셀 이동해야합니다. 하지만 지금은 잠시 붙어서 내가 뭘 잘못했는지 알 수 없습니다. (나는 또한 자바 스크립트와 프로그래밍의 새로운 프로그래밍에 익숙하다.) 캔버스에서 움직이는 물체

이

내가 콘솔 로그에서 볼 때 지금까지

<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으로 증가했고, 두 번째 호출했을 때 x가 400보다 커서 while 루프는 아무 것도하지 않습니다. –

안녕하세요. 문제가 해결되었다고 생각되면 녹색 체크 표시를 클릭하여 '수락'으로 표시하십시오. 이렇게하면 여전히 대답이없는 나이가 들었던 사람에게 집중할 수 있습니다. – mgamba

캔버스에서 움직이는 물체

답변

관련 문제