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

Why are my canvas lines not being drawn individually?

本文关键字：没有单 绘制 布线 我的 为什么      更新时间：2023-09-26

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

$(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);
})

当我只调用一次函数时，它工作得很好，当我多次调用它时，它会试图绘制一个完整的形状。

您需要为每一行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>

相关文章：