setTimeout() 및 캔버스가 의도 한대로 작동하지 않습니다.

여기 내 코드가 있습니다. 캔버스에 VIBGOYR 패턴을 생성하고 시간 간격 후에 시스템의 방사형 그래디언트를 변경하여 애니메이션으로 보이게하려고합니다.
setTimeout() 및 캔버스가 의도 한대로 작동하지 않습니다.

function activate(index){ 
    canvas =document.getElementById("exp"); 
    context = canvas.getContext('2d'); 

    //Start. 
    draw(index); 

    //Functions. 
    function draw(index){ 
     drawGradiantSq(index); 
     var t=setTimeout(doTimer,1000); 
    } 

    function doTimer(){ 
     draw(index+10); 
    } 

    function drawGradiantSq(fi){ 
     console.log(fi); 
     var g1 = context.createRadialGradient(0,300,0,500,300,fi); 
     colors = ["violet","indigo","blue","green","orange","yellow","red"]; 
     var x= 1/12; 

     for (var i=0;i<colors.length;i++){ 
      g1.addColorStop(i*x,colors[i]); 
     } 
     context.fillStyle = g1; 
     context.fillRect(0,0,500,600); 

     var g2 = context.createRadialGradient(1000,300,0,500,300,fi); 

     for (var i=0;i<colors.length;i++){ 
      g2.addColorStop(i*x,colors[i]); 
     } 
     context.fillStyle = g2; 
     context.fillRect(500,0,1000,600); 
    } 
}

그러나 타이머가 잘 작동 것 같다 비록 내가 갖는 출력은 단 한 번만 그라데이션을 변경합니다. HTML 파일 :

<body> 
    <canvas id="exp" width="1000px" height="600px"></canvas> 
    <button onclick="activate(index+=10);">Paint</button> 
</body>

변수 지수는 시도 setInterval 대신 setTimeout 사용하여 0

출처

2012-02-20 Likhit

지수는 변경되지 않고 유지'기능 doTimer은() {그릴 (인덱스 + = 10);} 시도' – Leonid

에 전역 변수 집합입니다.

setTimeout

는 한 번만 실행됩니다 : 'setInterval' vs 'setTimeout'

출처

2012-02-20 10:13:19

왜 당신이 누구의 downvote? 이것은 유효한 대답입니다. –

콜백 된'doTimer'는'setTimeout'을 다시 호출하는'draw'를 호출합니다. – Leonid

아, 사과드립니다. 나는 재귀를 보지 못했다. 그러나 흥미롭게도 그것은 답변으로 표시되었습니다. –

setTimeout() 및 캔버스가 의도 한대로 작동하지 않습니다.

답변

관련 문제