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

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

1 个答案: