在画布上逐一绘制形状，从具有循环的数组

我正试图创建一种交互式地图。用户在画布上放置标记以标记通过地图的路径。一旦他们完成，我希望他们能够按下一个按钮，将动画的路径，一次一个标记，但我似乎无法弄清楚如何做到这一点。在画布上逐一绘制形状，从具有循环的数组

我有用户使用此代码标记画布。

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

}

它显示完成的路径，但我希望它显示每个步骤之间的延迟。

我想我可能会在循环函数中使用数组drawCoords错误，但我似乎无法弄清循环数组内容的方式。我试过重写大部分draw（）的代码;在setTimeout函数内部，但是当我这样做时，什么都不会发生。

我真的很感激，如果有人能帮助我。非常感谢。

来源

2016-03-31 Jambonathan

你的代码setTimeout将在函数重复时立即触发。你可以使用setInterval来实现这一点。如果您需要更高质量的动画，请查看requestAnimationFrame（）。

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

来源

2016-03-31 20:32:13

在画布上逐一绘制形状，从具有循环的数组

回答

相关问题