キャンバスのサイズ変更時に瞬きを避ける方法

Question

ボールがボーダーに当たったときにキャンバスサイズを1ピクセルずつ増やすために、このjavascriptを書きました。ただし、サイズが変更されると、キャンバス全体が点滅します。この問題の原因を知りません。修正する方法はありますか？

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

私はあなたのコードを見ていないが、あなたができることがいくつかありますが、私は2つに言及します。

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

ニースアプリケーションを見ることができます！ :)

onMouseMoveではなく、スライダをキャンバスに変更してonMouseUpとすると、ユーザーエクスペリエンスが向上する場合があります。

また、私はいくつかのボールが別のボールの内側に産みついていることに気づいたので、彼らは永遠に頑張っています。あなたはそれを避けるために産卵する前に衝突をチェックすることができます。