为什么不在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