为滚动背景添加视差答案

【问题标题】：Adding parallax to scrolling background为滚动背景添加视差
【发布时间】：2013-08-22 14:40:36
【问题描述】：

我正在制作一款画布游戏，您可以在其中乘坐宇宙飞船穿越无尽的重复背景。现在我正在根据玩家的 x/y 位置在不同位置绘制四个背景实例，因此它们会随着玩家移动。

ctx.translate(ax,ay);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,(Math.round(y/720)*720)-720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,(Math.round(y/720)*720)-720,1080,720);

转换为 ax 和 ay 基本上允许对象随着玩家移动的相机滚动，因为 ax 和 ay 是相对于玩家的位置的。我可以通过这样做来创建视差效果：

ctx.translate(ax*.5,ay*.5);

这使得背景滚动比其他游戏对象慢，就像我想要的那样。但是我还没有想出如何调整其余的代码来弥补。随着玩家离 (0,0) 越来越远，他看到的背景越来越少，因为它似乎以更快的速度超越了他。我该如何解决这个问题？

【问题讨论】：

试试 JS 库？ Stellar.js听说不错。
我不需要任何复杂的东西，我只需要背景以比游戏中其他对象慢的速度滚动。

标签： javascript html5-canvas

【解决方案1】：

作为 markE 答案的一个选项，您根本不需要使用第二个画布（这是一个很好的选择）。

您可以简单地使用 CSS 作为背景图像，并根据需要调整背景位置。

Demo here

最重要的部分就是以下几行：

背景 X 位置，其中 -1 可以替换为您要移动的值。

bgx -= 1;

然后对于每个循环，背景位置都会更新（本例中 Y 位置是固定的）：

canvas.style.backgroundPosition = bgx + 'px -30px'; // set X and Y position

当bgx 以某种方式等于图像的最大宽度时，您只需将其重置为开头。

【讨论】：

【解决方案2】：

使用 2 个画布 - 一个直接放在另一个之上

“背景”画布位于底部，动画速度较慢。
“游戏对象”画布位于顶部，动画速度更快。

这样您就可以为每个画布使用不同的动画速度创建视差效果。

【讨论】：