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函数中的内部函数animate创建的canvasObj。变量x和y在父函数级别可用，并且可以由animate函数操作。 animate通过使用创建动画效果的setTimeout来调用自身。这就是它。希望这可以帮助您顺利前进。

动画画布'.stroke（）没有外部库

1 个答案: