ループで配列から1つずつキャンバスに図形を描画します

Question

私は一種のインタラクティブマップを作成しようとしています。キャンバスにマーカーを配置して、地図のパスをマークする場所。それらが完了したら、一度に1つのマーカー、そのパスをアニメートするボタンを押すことができるようにしたいが、私はそれを行う方法を把握することはできません。

私はこのコードでキャンバスにマークを付けました。

getCoords（e）は、マウス座標を検出する他の場所に配置された関数です。

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

このコードを使用してボタンをクリックすると、そのコードをループしてパスをアニメーション化しようとしています。

function playButton() 
{ 
    drawing = false; 

    context.clearRect(0,0,canvas.width,canvas.height, false); 

    (function theLoop (l) 
    { 

     setTimeout(function() 
     { 
      draw(); 
      if (--l) 
      {   
       theLoop(l);  
      } 
     }, 1000); 

    })(drawCoords.length); 

} 

完成したパスが表示されますが、その間に各ステップが表示されます。

私はtheLoop関数で間違った配列drawCoordsを使用している可能性がありますが、配列の内容をループする方法を理解できないようです。私はdraw（）からほとんどのコードを書き直そうとしました。 setTimeout関数の内部では、私がそうすると、何も起こりません。

誰でも私を助けることができたら本当に感謝します。どうもありがとう。

Answer 1

あなたのコードでsetTimeoutは、関数がそれ自身を繰り返すときに即座にトリガされます。これを実現するには、setIntervalを使用できます。 requestAnimationFrame（）に高品質のアニメーションが必要な場合。

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