没有外部库的动画画布' .stroke()

Question

我知道它被问了很多（我用谷歌搜索过），但是如何在画布上为 .stroke() 命令制作动画？我找到了一些示例，但它们都依赖于外部强大的（出于我的目的）库或需要使用预先生成的 SVG 文件。
我有这个页面here（我知道这很糟糕，但我正在学习曲线）。我需要的是使底部“按钮”的线条“增长”或具有至少类似于其他按钮提供的圆形效果。对于圆圈，我使用 jquery 的旋钮库，但对于线条......感觉这可以通过转换或其他东西来完成，但我不能把手指放在它上面。有什么建议吗？

Answer 1

有几种方法可以做到这一点，但最简单（和本机）的方法不需要太多代码。这是canvas stroke() 动画的WORKING FIDDLE。随附的 JavaScript 如下。这是一个非常简单的例子，但它应该给你正确的想法。

var canvasObj = function() {

  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      x = 0,
      y = 0,

      animate = function() {

        ctx.beginPath();
        ctx.moveTo( 0, 0 );
        ctx.lineTo( x,y );
        ctx.stroke();

        x += 5;
        y += 2.5;

        setTimeout( animate, 200 );
      };


  return {
    'animate': animate
  };

};

解释：使这项工作发挥作用的是closure，它由canvasObj 函数中的内部函数animate 创建。变量x 和y 在父函数级别可用，并且可以由animate 函数操作。 animate 通过使用 setTimeout 调用自己，创建动画效果。就是这样。希望这可以帮助您顺利上路。