javascript - Canvas 游戏中的图像闪烁

Question

在一个大学项目中，我的任务是创建一个 Flappy Bird 克隆版本。这是使用 HTML5 Canvas 完成的。

这个问题并不经常发生，但似乎每隔 6 秒左右，草就会闪烁一次。我不确定是什么原因造成的，可能是性能问题。

这是一个链接，您可以看到该问题:http://canvas.pixcelstudios.uk

这是我用来绘制草的函数:

var drawGrass = function(cWidth, ctx, minusX)
{
	var x = bg_grass.x;
	var y = bg_grass.y;
	var w = bg_grass.w;
	var h = bg_grass.h;
	var img = bg_grass.img;

	if (minusX[0] >= cWidth)
	{
		bg_grass.x = 0;
		minusX[0] = 0;
	}

	ctx.drawImage(img, x, y, w, h);

	if (minusX[0] > 0)
	{
		ctx.drawImage(img, w-minusX[0], y, w, h);
	}
};

基本上，我正在绘制两个草 Sprite ，每个 Sprite 占据 Canvas 宽度。一个从 X 0 开始，另一个从 Canvas 末尾开始。两者每帧都会递减，然后其中一个完全离开屏幕，完全重置以保持循环。

我认为这与我的更新循环没有任何关系，如下所示:

this.update = function()
	{
		clearScreen();
		updateBackground();
		updatePositions();
		checkCollisions();
		render();
		requestAnimFrame(gameSpace.update);
	};

我已经阅读了一些内容，并且读到了有关使用第二个 Canvas 充当缓冲区的内容。显然这可以停止闪烁并提高性能？但我见过的所有示例都显示零件被循环绘制到 Canvas 中，并且我无法真正看到在游戏循环中执行此操作(移动零件和所有零件)会如何提高性能而不是降低性能。当然正在执行相同的操作，只不过现在您还必须将第二个 Canvas 绘制到第一个 Canvas 上？

如果您需要更多信息，请告诉我(尽管您应该能够从网络链接中看到完整的源代码)。

谢谢!

Answer 1

好的，我发现问题了!只是我的drawGrass函数中的一个简单错误。

由于顺序的原因，只有一个帧，我将速记 X 变量设置为 bg_grass.x，然后将 bg_grass.x 设置为其他值，因此绘制了错误的值。

我现在已经在第一个 if 语句之后设置了速记变量。

但是，如果有人能够对有关缓冲区 Canvas 的问题的第二部分提供任何见解，我仍然非常感激。