为什么不在Canvas中使用For循环工作？

我试图让画布在循环中显示i - 我想要i就像计数t一样，从1-9不停止。我只是无法弄清楚什么是错的。 JavaScript的看起来是这样的：为什么不在Canvas中使用For循环工作？

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天;如果有人能告诉我它有什么问题......非常感谢！

来源

2013-02-22 Luxiyalu

当你迭代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

来源

2013-02-22 08:09:21

但如果是因为时间太少，为什么数量甚至没有闪烁了一下，当我告诉'我'从0到999循环，'t'的计数显着减慢？至少数字从9变为999应该引起明显的闪烁？ – Luxiyalu 2013-02-22 09:55:17

大多数浏览器都不会重画屏幕，直到脚本结束。这是一个重要而且非常有用的优化，它可以防止在绘制场景时画布闪烁（即绘制背景，然后绘制前景）。 – 2013-02-22 10:04:12

为什么不在Canvas中使用For循环工作？

回答

相关问题