为什么我的画布线条没有单独绘制？答案

【问题标题】：Why are my canvas lines not being drawn individually?为什么我的画布线条没有单独绘制？
【发布时间】：2015-03-28 00:47:47
【问题描述】：

我的画布上有几条动画线，它们不是单独绘制的，它们试图绘制成一条完整的路径。为什么会这样？

$(document).ready(function(){
    canvas = document.getElementById("test");
    ctx = canvas.getContext("2d");

    function animateLines(name, x1, y1, x2, y2, stroke, width, duration){
        var count = 0;
        var ms = 10;
        duration = duration * ms;

        ctx.beginPath();
        ctx.moveTo(x1, y1);

        function countNumbers(){
            count += 1;
            if(x2 > x1){
                ctx.lineTo((x1 + count), y2);
            }

            else if(y2 > y1){
                ctx.lineTo(x1, (y1 + count));
            }

            if((x1 < x2) && (count == x2)){
                clearInterval(counter);
            }

            else if((y1 < y2) && (count == y2)){
                clearInterval(counter);
            }
            ctx.lineWidth = width;
            ctx.strokeStyle = stroke;
            ctx.stroke();
        }

        $("#pause").on("click", function(){
            clearInterval(counter);
        })
        $("#play").on("click", function(){
            counter = setInterval(countNumbers, duration);
        })
    }

    animateLines("Line", 0, 100, 100, 100, "white", 5, 3);
    //animateLines("Line2", 150, 250, 350, 250, "red", 5, 5);
    //animateLines("Line3", 100, 0, 100, 300, "blue", 5, 1);
})

当我只调用一次函数时，它工作正常，当我多次调用它时，它会尝试绘制一个完整的形状。

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

您需要为每一行加上moveTo(x1, x2) 以及beginPath() 以更改其笔触颜色：否则，stroke() 将绘制所有形状。

var canvas = document.getElementById("test"),
  ctx = canvas.getContext("2d");

function animateLines(name, x1, y1, x2, y2, stroke, width, duration) {
  var count = 0;
  var ms = 10;
  duration = duration * ms;
  var counter;


  function countNumbers() {
    ctx.beginPath();
    ctx.moveTo(x1, y1);

    count += 1;
    if (x2 > x1) {
      ctx.lineTo((x1 + count), y2);
    } else if (y2 > y1) {
      ctx.lineTo(x1, (y1 + count));
    }

    if ((x1 < x2) && (count == x2)) {
      clearInterval(counter);
    } else if ((y1 < y2) && (count == y2)) {
      clearInterval(counter);
    }
    ctx.lineWidth = width;
    ctx.strokeStyle = stroke;

    ctx.stroke();
  }

  $("#pause").on("click", function() {
    clearInterval(counter);
  })
  $("#play").on("click", function() {
    counter = setInterval(countNumbers, duration);
  })
}

animateLines("Line", 0, 100, 100, 100, "green", 5, 3);
animateLines("Line2", 150, 250, 350, 250, "red", 5, 5);
animateLines("Line3", 100, 0, 100, 300, "blue", 5, 1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="pause">Pause</button>
<button id="play">play</button></div>
<canvas id="test" width="350" height="350"></canvas>

【讨论】：