HTML5 Canvas動畫中的循環

我正在使用Javascript編寫HTML5 Canvas動畫的代碼。我正在使用requestAnimFrame。動畫對於某個點來說工作正常。但是當我在使用requestAnimFrame或setTimeout的函數中添加循環（for或while）時，動畫不起作用。對我來說，添加循環很重要。任何建議，使這成爲可能？HTML5 Canvas動畫中的循環

function animate(lastTime) { 
      var date = new Date(); 
      var time = date.getTime(); 
      var timeDiff = time - lastTime; 
      var linearSpeed = 100; 
      var linearDistEachFrame = linearSpeed * timeDiff/1000; 
      var currentX = LINE.x;    
      var currentY = LINE.y; 
       var newY = currentY + linearDistEachFrame; 
       var newX = currentX + linearDistEachFrame; 
       context.beginPath(); 
       context.moveTo(LINE.x, LINE.y); 
       lastTime = time; 

       var Xindex=LINE.arrayX.indexOf(newX); 

       //here am getting error..if i replace this with 'if' its working fine..and even if there is not a single LOC it doesnt work 
       while(Xindex!=-1) { 
             //processes the loop 
       } 

       context.lineTo(LINE.x, LINE.y); 
       context.fillStyle = "red"; 
       context.fill(); 
       context.lineWidth = LINE.borderWidth; 
       context.strokeStyle = "red"; 
       context.stroke(); 
      // request new frame 

      requestAnimFrame(function() { 
       animate(lastTime); 
      }); 
     }

來源

2012-04-16 thecodejack

代碼在哪裏？我們應該猜測問題出在哪裏？ – mpm 2012-04-16 11:32:06

一些代碼請... ...什麼工作，什麼都沒有......你如何構建這件事可能是 – tipycalFlow 2012-04-16 11:32:06

添加代碼的原因..如果我用'如果'它替換'while'它工作..and即使循環中沒有代碼，它也不起作用... – thecodejack 2012-04-16 11:40:52

嘗試在循環中添加一條break語句，看看是否修復它。如果確實如此，則意味着條件已滿足，並且代碼將永久停留在循環中，除非您發生崩潰或將Xindex更改爲-1。

您需要精確縮小代碼失敗的位置。一種方法是通過在代碼的關鍵部分打印出調試語句，以確保它們被執行，重要變量的價值是什麼。

例如，您可以使用console.log("test");來寫入Chrome的JavaScript控制檯或Firebug或類似程序。

您將遇到的工作動畫程序的調試輸出會遇到一個麻煩，那就是輸出的污垢。你可能只想在某些有趣的情況下登錄，否則你會淹死在一個流中。數據的。

來源

2012-04-16 11:59:24 aaaidan

嗯..將檢查，讓你知道... – thecodejack 2012-04-16 12:11:02

HTML5 Canvas動畫中的循環

回答

相關問題