如何在調整畫布大小時避免眨眼

Question

我寫了這個javascript，每當球碰到邊框時，就將畫布大小增加1個像素。但是，當尺寸改變時，整個畫布會閃爍。不知道是什麼原因導致了這個問題。有什麼方法可以解決嗎？

function testWalls() { 
    var ball; 
    var testBall; 

    for (var i =0; i <balls.length; i++) { 
     ball = balls[i]; 

     if (ball.nextX+ball.radius > theCanvas.width) { 
      ball.velocityX = ball.velocityX*-1; 
      ball.nextX = theCanvas.width - ball.radius; 
      theCanvas.width++; 
      drawScreen(); 


     } else if (ball.nextX-ball.radius < 0) { 
      ball.velocityX = ball.velocityX*-1; 
      ball.nextX = ball.radius; 

     } else if (ball.nextY+ball.radius > theCanvas.height) { 
      ball.velocityY = ball.velocityY*-1; 
      ball.nextY = theCanvas.height - ball.radius; 
      theCanvas.height++; 
      drawScreen(); 

     } else if(ball.nextY-ball.radius < 0) { 
      ball.velocityY = ball.velocityY*-1; 
      ball.nextY = ball.radius; 
     } 


    } 

} 

演示可以在這裏 http://converteveryunit.com/pot/demo3.html

Answer 1

我沒有看過你的代碼，但也有一些事情可以做，但我會提及兩個。

一個是緩衝你的代碼，所以你會畫到一個離屏畫布，然後把它放在上面，但更重要的是不要清除整個圖像，然後重畫。

清除正在發生的變化，並重新繪製，這將解決您的問題。

有關你可以做什麼更多的想法，你可以看看 http://www.html5rocks.com/en/tutorials/canvas/performance/

Answer 2

您可以使用緩存發現。

這裏是一個很好的教程吧：

http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games

Answer 3

漂亮的應用程序！ :)

我想你可能會通過使滑塊更改畫布onMouseUp而不是onMouseMove以獲得更好的用戶體驗。

此外，我注意到有些球在另一個球內產卵，所以他們永遠陷入危險之中。你可以在產卵前檢查碰撞以避免碰撞。