html5-javascript在画布上逐步绘制

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库。它可能会有所帮助。请查看自述文件以获取详细信息。