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>

可變折射率是一個全局變量設置爲0

來源

2012-02-20 Likhit

指數保持不變，嘗試'函數doTimer（）{畫（指數+ = 10）;}' – Leonid 2012-02-20 10:38:54

使用setInterval代替setTimeout嘗試。

setTimeout只能觸發一次： 'setInterval' vs 'setTimeout'

來源

2012-02-20 10:13:19

爲什麼從你是誰的downvote？這是一個有效的答案。 – 2012-02-20 10:29:50

回調'doTimer'調用'draw'，再次調用'setTimeout'。 – Leonid 2012-02-20 10:49:15

啊對了，道歉。我沒有看到遞歸。但有趣的是，它被標記爲答案。 – 2012-02-20 10:54:02

setTimeout（）和畫布不能按預期工作

回答

相關問題