在多個對象在畫布上呈現之前清除畫布

我在畫布上呈現了多個對象，每個對象都在傾聽方向移動的keydown，並使用requestAnimationFrame重繪。在多個對象在畫布上呈現之前清除畫布

問題是，如果我在每個對象的重繪上設置了清晰的畫布，那麼在btw不同對象的重繪中會運行多個清晰畫布函數，導致對象閃爍。什麼是在畫布上重繪（並清除）多個對象的最佳方式。

function CreatePawn() {    
      var x = 25, 
       y = 25; 

      animate(); 

      function draw() {    
       ctx.clearRect(0, 0, cwidth, cheight); 
       ctx.beginPath(); 
       ctx.lineWidth="3"; 
       ctx.arc(x, y, 2, 0, Math.PI * 2, true); // circle    
       ctx.stroke();    
      }; 

      function animate() { 
       requestAnimationFrame(animate); 
       if(left) x -= speed; 
       if(up) y -= speed; 
       if(right) x += speed; 
       if(down) y += speed; 
       draw(); 
      };

來源

2011-04-02 bcm

爲我工作的解決方案是有1個全局setInterval（時間循環）運行的將清除畫布，然後再環重繪被推到一個數組中的所有對象。

每個對象仍然可以有它們的內部時間循環來檢查x/y的變化，但是重繪取決於全局setInterval。

來源

2011-04-03 09:52:49 bcm

如果通過_「重畫到全局setInterval」_你的意思是它通過活動對象數組循環並調用'myObject.draw（）'，那麼這就是我的建議。對不起，您沒有清楚地表達意見，但感謝您提供您低估的原因。 – Phrogz 2011-04-03 13:53:01

@Phrongz，btw，downvote不是我的！ – bcm 2011-04-03 23:56:57

我想我認識到，功能...

根本的問題是，您的主板畫布不應該是Pawn對象的一部分，而是一個包羅萬象Board對象的一部分。

它當時是對象的應處置動畫事件，清除自身，然後調用每一個棋子的draw()方法，其所應通過適當的範圍內。

來源

2011-04-03 10:08:26 Alnitak

在多個對象在畫布上呈現之前清除畫布

回答

相關問題