Html5-javascript画布绘制一步一步

html5-javascript drawing on canvas step-by-step

本文关键字：一步 布绘制 Html5-javascript 绘制      更新时间：2023-09-26

我有一些坐标，我想一步一步在HTML5画布上绘制。我想要的是，这条线慢慢变长。我有这段代码，但它没有做我所期望的。有人能帮我吗?

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

Try 

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

查看animation .js库。这可能会有帮助。有关详细信息，请查看Readme文件。

相关文章：