Question

我正在用HTML5画布构建一个动画，我对这门语言很新，所以我一点也不去学习。

动画是线条＆＃34;绘图＆＃34;从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

在每个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点的线

2 个答案: