이 경로에 애니메이션을 적용하려면 어떻게해야합니까?

Question

저는 Canvas를 HTML5로 처음 사용합니다. 캔버스에서 하나의 경로를 만들었지 만 경로를 애니메이션으로 표시하고 한 번에 플래시하지 않기를 바랍니다. 그렇게하려면 어떻게해야합니까?

아래의 JS 코드 ::이다

내가 지금까지 시도 무엇

$('#draw').click(function() { 
    var a,b; 
    a=b=5; 

    context.clearRect(0, 0, 500, 500); 

    context.moveTo(centerx, centery); 
    context.beginPath(); 
    context.strokeStyle = "#000"; 
    for (i = 0; i < 120; i++) { 
      angle = 0.1 * i; 
      x = centerx + (a + b * angle) * Math.cos(angle); 
      y = centery + (a + b * angle) * Math.sin(angle); 
      context.lineTo(x, y); 
      context.stroke(); 
     } 

}); 

:

은 아무 소용 setInterval(), setTimeout() 모두를 사용했다. 시도 경로 렌더링 및 x와 y 값의 계산을 위해 다른 함수를 만들었지 만 또한 작동하지 않았습니다! 또한 설명서에 따르면 context.stroke()이 호출 될 때까지 경로가 그려지지 않으므로 애니메이션이 가능한지 궁금합니다.

편집 : JSFiddle 링크 https://jsfiddle.net/sankh_15A/7L3a4rkL/

Answer 1

재귀 당신의 나선형의 조각을 그리고 결국 특정 지점에서 탈출해야하는 애니메이션을 만들 수 있습니다.

이러한 애니메이션을 그리는 데 가장 최적화 된 방법은 window.requestAnimationFrame이지만, setIterval 또는 setTimeout도 사용할 수 있습니다.

예제는 다음과 같습니다

var i = 0; 
function render(){ 
    i++; 
    angle = 0.1 * i; 
    x = centerx + (a + b * angle) * Math.cos(angle); 
    y = centery + (a + b * angle) * Math.sin(angle); 
    context.lineTo(x, y); 
    context.stroke(); 
    if (i <720) 
    requestAnimationFrame(render); 
    } 
requestAnimationFrame(render);//start animation 

fiddle