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.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games

Answer 2

我没有查看你的代码，但你可以做一些事情，但我会提到两个。

一个是缓冲你的代码，所以你会绘制到一个离屏画布，然后把它放在上面，但更重要的是不要清除整个图像，然后再重绘。

清除正在发生变化的内容，并重新绘制，以解决您的问题。

有关您可以做什么的更多想法，您可以查看 http://www.html5rocks.com/en/tutorials/canvas/performance/

Answer 3

很好的申请！：）

我认为您可以通过使滑块更改画布onMouseUp而不是onMouseMove来获得更好的用户体验。

另外，我注意到有些球会在另一个球内产生，所以它们会永远地卡在一起。你可以在产卵前检查碰撞以避免这种情况。

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

3 个答案: