このパスをアニメーション化するにはどうすればよいですか？

Question

私はHTML5でCanvasを初めて使用しています。 キャンバス上に1つのパスを作成しましたが、パスをアニメーション化して一度にフラッシュしないようにします。どうすればいいですか？以下

は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()が呼び出されるまでパスが描画されないため、アニメーション化することさえ可能かどうか疑問に思っています。

EDIT :: 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