Dessiner des formes sur la toile une par une, à partir d'un tableau avec une boucle

Question

J'essaie de créer une sorte de carte interactive. Où l'utilisateur place des marqueurs sur la toile pour marquer un chemin à travers la carte. Une fois qu'ils ont terminé, je veux qu'ils soient en mesure d'appuyer sur un bouton qui va animer leur chemin, un marqueur à la fois, mais je n'arrive pas à comprendre comment faire cela.

J'ai l'utilisateur qui marque la toile avec ce code. GetCoords (e) est une fonction placée ailleurs qui détecte les coordonnées de la souris.

function draw(e) //mousemove 
{ 
    context.clearRect(0,0,canvas.width,canvas.height, false); 

    var coords = getCoords(e); 

    a = coords[0]; 
    b = coords[1]; 
    xcor.push(a); 
    xcor.push(b); 

    context.moveTo(coords[0], coords[1]); 

    context.beginPath(); 

    context.arc 
    (
     coords[0], 
     coords[1], 
     10, 
     Math.PI*2, 
     false 
    ); 

    context.closePath(); 

    context.fillStyle='blue'; 

    context.fill(); 

    if (drawing == true) 
    { 

     for(i=0;i<drawCoords.length;i++) 
     { 

      context.beginPath(); 

      context.arc 
      (
       drawCoords[i].x, 
       drawCoords[i].y, 
       10, 
       Math.PI*2, 
       false 
      ); 

      context.closePath(); 

      context.fill();   

      x = coords[0]; 
      y = coords[1];   
      context.beginPath(); 


     for(i=0;i<drawCoords.length;i++) 
     {    
      context.lineTo(drawCoords[i].x,drawCoords[i].y); 
      context.stroke(); 
     } 
} 

function startSketch(e) //mousedown 
{ 

    var coords = getCoords(e); 

    drawCoords.push({x:coords[0], y:coords[1]}); 
    draw();  
} 

et je suis en train de boucler à travers ce code pour animer le chemin quand un bouton est cliqué en utilisant ce code. Il affiche le chemin complet mais je veux qu'il montre chaque étape avec un retard entre les deux.

Je pense que je peux utiliser le tableau drawCoords incorrect dans la fonction theLoop, mais je n'arrive pas à trouver la bonne façon de faire une boucle dans le contenu des tableaux. J'ai essayé de réécrire la plupart du code de draw(); à l'intérieur de la fonction setTimeout mais quand je le fais, rien ne se passe du tout.

J'apprécierais vraiment que quelqu'un puisse m'aider. Merci beaucoup.

Answer 1

dans votre code setTimeout sera déclenché instantanément lorsque la fonction se répète. Vous pouvez utiliser setInterval pour y parvenir. Si vous avez besoin d'une animation de meilleure qualité, regardez dans requestAnimationFrame().

var i = 1; 
var animation = setInterval(function() { 
    draw(); 
    i += 1; 
    if(i >= drawCoords.length) { 
     clearInterval(animation); 
    } 
}, 1000);