从 A 点到 B 点的 HTML5 Canvas 动画线

Question

我正在使用 HTML5 画布构建动画，我对这门语言非常陌生，所以正在学习一点点。

动画是从 A 点到 B 点再到 C 点到 D 点的“画线”等（总共 13 条线）。

我已经能够用这段代码画线了：

<canvas id="myCanvas" width="220" height="600"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(0, 2);
    // LINE 1
    context.lineTo(220, 2);
    // LINE 2
    context.lineTo(0, 30);
    // LINE 3
    context.lineTo(220, 30);
    // LINE 4
    context.lineTo(0, 60);
    // LINE 5
    context.lineTo(220, 60);
    // LINE 6
    context.lineTo(0, 90);
    // LINE 7
    context.lineTo(220, 90);
    // LINE 8
    context.lineTo(0, 120);
    // LINE 9
    context.lineTo(220, 120);
    // LINE 10
    context.lineTo(0, 150);
    // LINE 11
    context.lineTo(220, 150);
    // LINE 12
    context.lineTo(0, 180);
    // LINE 13
    context.lineTo(220, 180);


    context.lineWidth = 2;
    context.stroke();
</script>

但是，现在我希望能够为线条一条一条地设置动画。谁能帮我弄清楚我该怎么做？

这是JSfiddle

Answer 1

http://jsfiddle.net/6zv7jgo4/1/ 这个用于在 X 行之后清除： http://jsfiddle.net/6zv7jgo4/2/

使用函数绘制线条，如下所示：

function drawLine(whichOne, context)
{
    context.beginPath();

    if (whichOne % 2 == 0)
    {
        context.moveTo(0,2 + (whichOne / 2) * 30);
        context.lineTo(220, 2 + ((whichOne + 1) / 2) * 30);
    }
    else
    {
        context.moveTo(220,2 + (whichOne / 2) * 30);
        context.lineTo(0, 2 + ((whichOne + 1) / 2) * 30);
    }
    context.lineWidth = 2;
    context.stroke();

}

该函数会根据您要绘制的线自动计算应绘制的位置。

那你就用一个区间来一一画线：

var counter = 0;
setInterval(function(){

      if (counter > 1000000) {//or any other number
          counter = 0;
          context.clearRect(0, 0, 220, 600);
      }


      drawLine(counter,context);
      counter++;



},1000);

完整代码：见 jsfiddle！

Answer 2

在每个 context.lineTo() 之后使用 context.stroke() 并在每个 context.stroke() 之后添加一个小延迟。

也许你可以做一个功能：

function drawLine(x, y) {
     context.lineTo(x, y);
     context.stroke();
}

然后做：

drawLine(220, 2);
setTimeout(function () {
       drawLine(0, 30);
}, 200);
setTimeout(function () {
      drawLine(220, 30);
}, 200);
....

编辑：

还要确保在开头初始化上下文笔画宽度。