Почему анимация линии холста html работает, но не после рисования линии - PullRequest
Новая
       23

Почему анимация линии холста html работает, но не после рисования линии

0 голосов
/ 10 января 2020

Я могу нарисовать линию точка за точкой, но если сначала я нарисую линию полностью, то попробую точки, все точки появятся одновременно.

Итак, посмотрите код, в функции window_onload, если я вместо вызова startRedDots вместо pathRll вы поймете, что я имею в виду. Он проведет черту, затем сразу появятся все красные точки и не будут знать, почему. 

<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>

1 Ответ

0 голосов
/ 11 января 2020

ОК, у меня это работает, если кому-то интересно ... просто нужно добавить 'c1.beginPath ();' как первая строка в функции oneAtATime.

...