如何为此路径创建动画？

Question

我是HTML5中的Canvas的新手。 我在画布上制作了一条路径，但我希望路径设置为动画而不是一次闪烁。我该怎么做？下面

是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