1
对于一个大学项目，我负责创建一个Flappy Bird克隆。它正在使用HTML5画布完成。图像画布闪烁游戏
这个问题并不经常发生，但似乎每隔6秒左右，草会闪烁。我不确定是什么原因造成的，这可能是性能问题。
这里是一个链接，所以你可能会看到问题：http://canvas.pixcelstudios.uk
这里是我使用的绘制草功能：
var drawGrass = function(cWidth, ctx, minusX)
{
\t var x = bg_grass.x;
\t var y = bg_grass.y;
\t var w = bg_grass.w;
\t var h = bg_grass.h;
\t var img = bg_grass.img;
\t if (minusX[0] >= cWidth)
\t {
\t \t bg_grass.x = 0;
\t \t minusX[0] = 0;
\t }
\t ctx.drawImage(img, x, y, w, h);
\t if (minusX[0] > 0)
\t {
\t \t ctx.drawImage(img, w-minusX[0], y, w, h);
\t }
};基本上，我正在绘制两个草图，每个草图都占据一个画布宽度。一个从0开始，另一个从画布的结尾开始。两者都是递减的每一帧，然后一个完全离开屏幕，它完全重置以保持循环。
我不认为这是什么与我的更新循环是如下：
this.update = function()
\t {
\t \t clearScreen();
\t \t updateBackground();
\t \t updatePositions();
\t \t checkCollisions();
\t \t render();
\t \t requestAnimFrame(gameSpace.update);
\t };我所做的阅读一点点，我读过有关有第二个画布作为缓冲区。显然这可以停止闪烁并提高性能？但是我所看到的所有例子都显示了这些零件被抽出到一个循环中，我不明白在一个游戏循环（移动零件和所有零件）中如何做会提高性能而不是减少它。当然，同样的操作正在执行，除了现在你还必须将第二个画布绘制到第一个画布上？
如果您需要更多信息，请让我知道（尽管您应该能够从网页链接中看到整个信息源）。
谢谢！