Javascript 调整画布大小时如何避免闪烁

我编写这个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;
        }


    }

}

函数testWalls（）{
var球；
var测试球；
对于（变量i=0；i扫描宽度）{
ball.velocityX=ball.velocityX*-1；
ball.nextX=canvas.width-ball.radius；
canvas.width++；
纱窗（）；
}否则如果（ball.nextX-ball.radius<0）{
ball.velocityX=ball.velocityX*-1；
ball.nextX=ball.radius；
}否则如果（ball.nextY+ball.radius>canvas.height）{
ball.velocityY=ball.velocityY*-1；
ball.nextY=canvas.height-ball.radius；
theCanvas.height++；
纱窗（）；
}否则如果（ball.nextY-ball.radius<0）{
ball.velocityY=ball.velocityY*-1；
ball.nextY=ball.radius；
}
}
}

可以在这里找到一个演示 您可以使用缓冲

以下是一个很好的教程：

---

我还没有看过您的代码，但是您可以做一些事情，但我会提到两件

一种是缓冲代码，这样你就可以画一个屏幕外的画布，然后把它放上，但是，更重要的是不要清除整个图像，然后重新绘制

明确正在发生的变化，并重新绘制，这将解决您的问题

有关您可以做什么的更多想法，请参见

不错的应用程序！：）

我认为，通过使滑块更改画布

onMouseUp

而不是

onMouseMove

，您可能会获得更好的用户体验

另外，我注意到一些球在另一个球里面产卵，所以它们会永远粘在一起。您可以在繁殖之前检查碰撞以避免这种情况