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

Question

我正在使用 HTML5 canvas 制作动画，我对这门语言还很陌生，所以我会边走边学。

动画是从A点到B点到C点到D点等"drawing"行（共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

在每个 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);
....

编辑：

还要确保在开始时初始化上下文 strokewidth。

Answer 2

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！

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

HTML5 Canvas animate line from point A to point B

html

canvas

line