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 파일을 확인하십시오.