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（）とキャンバスが意図したとおりに動作しない

答えて

関連する問題