为什么 html canvas 线条动画可以工作，但在已经画了一条线之后就不行了

Question

我可以一点一点地画线，但是如果我先把线画完整，然后再画点，所有的点一下子就出来了。

所以请看代码，在 window_onload 函数中，如果我改为调用 pathAll 而不是 startRedDots，您就会明白我的意思。它会画线，然后所有的红点同时出现，不知道为什么。

<script type="text/javascript">        
        
        var pauseAmount = 300;
     var m1, c1;
     var pathInt;

     var points1 = [new Vector(10, 10),new Vector(500, 500)];        

        function Vector(x, y)
     {
      this.X = x;
      this.Y = y;
     }

        var counter;
        var startX;
        var startY;
        var endX;
        var endY;
        var amount;

        function resetVars() {
            counter=0;
            startX = points1[counter].X;
            startY = points1[counter].Y;
            endX = points1[counter+1].X;
            endY = points1[counter+1].Y;
            amount = 0; 

         c1.strokeStyle = "lightgrey";
         c1.lineWidth = 15;
            c1.lineCap = "round";
            c1.setLineDash([1, 30]);
        }

     window.onload = function()
     {
      m1 = document.querySelector("#b");
      c1 = m1.getContext("2d"); 

            resetVars();
        
            //pathInt = setTimeout(function(){ pathAll(); }, 1); 

            pathInt = setInterval(function(){ startRedDots(); }, pauseAmount);   
       
     };

        function pathAll() {

            c1.moveTo(startX, startY);
            c1.lineTo(endX, endY);
            c1.stroke();                         
            
            resetVars();            

            setTimeout(function(){ startRedDots(); }, 2500);  
        }

        function startRedDots() {
            c1.strokeStyle = "red";;
            pathInt = setInterval(function(){ oneAtATime(); }, pauseAmount);
        }

        function oneAtATime() {

            c1.moveTo(startX, startY);
            c1.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);

            //alert(startX + (endX - startX) * amount);
                
            if (points1[counter+1].X < points1[counter].X) {

                if(points1[counter+1].X < Math.round(eval(startX + (endX - startX) * amount))) {
                    c1.stroke();     
                }
                else {
                    clearInterval(pathInt);
                }
            }
            else if (points1[counter+1].X > points1[counter].X) {

                if(points1[counter+1].X > Math.round(eval(startX + (endX - startX) * amount))) {
                    //alert(startX + (endX - startX) * amount);
                    c1.stroke();        
                }
                else {
                    clearInterval(pathInt);
                }
            }
            else if (points1[counter+1].X == points1[counter].X) {
                if(points1[counter+1].X == Math.round(eval(startX + (endX - startX) * amount))) {
                    c1.stroke();        
                }
                else {
                    clearInterval(pathInt);                    
                }
            }

            amount += 0.01; 
        }
       
    </script>
    
    <canvas id="b" width="600" height="600" style="position:absolute;top:50px;left:50px;"></canvas>

Answer 1

好的，如果有人感兴趣的话，我已经可以使用了...只需要在 oneAtATime 函数中添加 'c1.beginPath();' 作为第一行。

为什么 html canvas 线条动画可以工作，但在已经画了一条线之后就不行了

Why does html canvas line animation work but not after already drawing a line

html

javascript

animation

canvas

line