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

我如何设置此路径的动画？

1 个答案: