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ライブラリを確認してください。それは助けになるかもしれません。詳細は、Readmeファイルを確認してください。