爲什麼不在Canvas中使用For循環工作？

Question

我試圖讓畫布在循環中顯示i - 我想要i就像計數t一樣，從1-9不停止。我只是無法弄清楚什麼是錯的。 JavaScript的看起來是這樣的：

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
    function(callback){window.setTimeout(callback, 1000/60)}; 
})(); 

var cvs = document.getElementById("canvasId"), 
    c = cvs.getContext("2d"), 
    t = 0; 

window.onload=function loop(){ 
    window.requestAnimFrame(loop); 
    t++; 

    for(i=0;i<10;i++){ 
     c.clearRect(0,0,cvs.width,cvs.height); 
     c.font = "bold 90px Arial"; 
     c.fillText(i + " " + t, 100, 200); 
    } 
}; 

http://jsfiddle.net/luxiyalu/9UZU5/

這是一個迷你遊戲的一部分，我一直卡在這裏了2天;如果有人能告訴我它有什麼問題......非常感謝！

Answer 1

當你迭代i從0到您的繪圖功能9，沒有時間留下了兩個圖紙和用戶之間只能看到最後一次迭代值，即9

我不是肯定你真正想實現，但它看起來像你想的：

var cvs = document.getElementById("canvasId"), 
    c = cvs.getContext("2d"), 
    t = 0, 
    i = 0; 

window.onload = function loop(){ 
    window.requestAnimFrame(loop); 
    i++; 
    if (i==10) { 
     i = 0; 
     t++; 
    } 

    c.clearRect(0,0,cvs.width,cvs.height); 
    c.font = "bold 90px Arial"; 
    c.fillText(i + " " + t, 100, 200); 

}; 

Demonstration