javascript - 为什么这个 For 循环在 Canvas 中不起作用？

Question

我试图让 Canvas 循环显示 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/

这是一个迷你游戏的一部分，我已经被困在这里两天了；如果有人能告诉我出了什么问题...非常感谢!

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