html5-javascript dessin sur toile pas-à-pas

Question

J'ai quelques coordonnées, que je veux dessiner sur une toile HTML5 pas à pas. Je le veux, la ligne grandit lentement. J'ai ce morceau de code mais il ne fait pas ce que je m'attends. Est-ce que quelqu'un peut m'aider?

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

Answer 1

Essayez

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

Ou vous pourriez changer d'utiliser setInterval comme. Cela devrait fonctionner, mais je ne l'ai pas testé.

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

Consultez la bibliothèque animate.js. Cela peut être utile. Vérifiez le fichier Lisez-moi pour plus de détails.