html5-пошаговое рисование на холсте

Question

У меня есть некоторые координаты, которые я хочу постепенно нарисовать на холсте HTML5Я хочу этого, линия медленно растет.У меня есть этот кусок кода, но он не делает то, что я ожидаю.Кто-нибудь может мне помочь?

for(i=1;i<data[0].length;i++)
{
  context.lineTo(data[0][i],data[1][i]);
  setTimeout(function(){
  context.stroke();},3000);
}

Answer 1

Попробуйте

for(i=1;i<data[0].length;i++)
{
  context.lineTo(data[0][i],data[1][i]);
  setTimeout(function(){
  context.stroke();},3000*i);
}

Или вы можете изменить его на setInterval.Это должно работать, но я не проверял это.

var i=0;
var length=data[0].length;
var id = setInterval(function(){
  context.lineTo(data[0][i],data[1][i]);
  context.stroke();
  if(i++===length){clearInterval(id)}
},3000);

Answer 2

Проверьте библиотеку animate.js .Это может помочьПроверьте файл Readme для деталей.