javascript - 在 HTML 5 Canvas 上绘制静态背景

Question

刚刚编辑了我的问题，使其更清晰、更明显。

我正在为我的游戏构建背景，我希望我的背景与我在背景顶部绘制的对象(玩家对象除外)保持相同的相对位置，就像 FPS 游戏一样，只不过我的游戏是 2D 的。我很确定这已经被执行了一千次，但我不知道在哪里可以找到解决方案。

我的游戏设计为始终将我的 Angular 色聚焦在屏幕中心，并在背景的其他部分绘制其他对象。

假设我的背景有如下所述的 9 帧大小，那么一帧就是我的浏览器屏幕的确切大小。

现在，如果我的 Angular 色从第 1 帧移动到第 9 帧，我的 Angular 色将始终保持在中心，大约为 (frame.width/2, frame.height/2)，因为我的 Angular 色将具有某种形状。因此屏幕现在将显示帧“9”而不是帧“1”。在移动过程中，我将能够看到其他物体从我的 Angular 色“移开”。

我使用Map类来绘制背景，它的render()方法如下:

var drawBackground = function (callback) {      
  callback(this);
}

image.onload = drawBackground(() => {
  var pattern = this.ctx.createPattern(image, 'repeat');
  this.ctx.fillStyle = pattern;
  this.ctx.fillRect(0, 0, this.paintWidth, this.paintHeight);
  // this.ctx.drawImage(image, 0, 0, 10000, 10000);

});
image.src = require('../media/bg.jpg');

现在我的代码有问题。因为我的背景( map )绘图总是在我的 Angular 色周围重新绘制屏幕，​​所以我看到的效果就像背景与我的 Angular 色一起移动，而其他所有内容都保持在同一位置。这看起来不自然。我希望背景和所有其他对象保持在同一位置。它们不随我的性格移动。我怎样才能做到这一点？

我使用 animate() 函数来显示动画。

function animate() {

  map.clear(); // clearRect

  ... Some code to track my character...

  map.render();

  character.render();

  requestAnimationFrame(animate);
}

animiate();

编辑:

有些人建议我使用两 block Canvas 。我实际上使用了两个 Canvas 。

这是我在 index.html 文件中的设置:

<canvas id="background" style="z-index: 1;">You are viewing the Game Background Canvas -- Update your browser!</canvas>
<canvas id="canvas" style="z-index: 2;">...</canvas>

它们的 CSS 样式如下:

#canvas, #background {position: absolute;left: 0px; top: 0px;}

我的背景使用“背景” Canvas ，我的 Angular 色使用“ Canvas ”，但我的其他对象也使用“背景” Canvas ，它们没有随着我的 Angular 色移动，只有背景随着我的 Angular 色移动，这很奇怪.

Answer 1

要按照您想要的方式绘制背景，您只需将要绘制的背景定位在 -character.x, -character.y 处，假设这就是存储字符位置的位置。要使用 Canvas 图案执行此操作，只需将 Canvas 平移到该位置，然后在原点 + Angular 色位置处绘制图案即可。

之所以需要如此多的摆弄，是因为 Canvas 模式的工作方式。它们就像 Canvas 渐变；无论您在哪里填充，都几乎就像您在使用魔术文本一样，可以揭示下面隐藏的颜色。无论您是在 100、100 还是 200、200 位置填充都没有关系；模式总是从 0, 0 开始。因此，我们将 0, 0 更改为负玩家的位置，并在正玩家的位置进行绘制。

image.onload = drawBackground(() => {
  var pattern = this.ctx.createPattern(image, 'repeat');
  this.ctx.fillStyle = pattern;
  this.ctx.save();
  this.ctx.translate(-character.x, -character.y);
  this.ctx.fillRect(character.x, character.y, this.paintWidth, this.paintHeight);
  this.ctx.restore();
});

根据OP的要求，我将尝试更详细地解释这个“魔法”。

Canvas 图案是一种填充样式，如纯色或 Canvas 渐变。将 fillRect 之类的方法视为窗口删除器，删除脏窗口以显示另一面。使用 Canvas 图案时，另一面是重复平铺的图案。现在，想象一下通过 window 可见的墙壁壁纸的图案。 (为了更简单地想象，墙壁接近接触 window ，因此您只能看到 window 的任何删除部分转换到墙上的形状。)假设您要将 window 的随机盒子形状删除干净露出后面图案的一部分。在左上角，您不一定会看到图案图 block 之一的左上角。你可能会看到中间。或者任何随机位。现在，假设我们希望图 block 的左上角位于从窗口删除的框形状的左上角。我们必须更改壁纸开始平铺的位置。在 Canvas 上，我们只需使用翻译即可。我们将 Canvas 的原点 (x = 0, y = 0) 转换为我们需要的任何位置(目前不相关)，然后执行 fillRect。然而， fillRect 将在新的原点执行。我们不希望这样。因此，我们将开始填充的 x ​​和 y 设置为与平移 Canvas 原点的量相反的值。然后，我们只需更改 Canvas 原点的平移量即可看到我们想要的图案的任何部分。

在我们的例子中，我们通过 Angular 色的 x 和 y 位置的负版本来翻译它。 (负值，以便背景以与 Angular 色相反的方式移动。)然后，我们从 Angular 色的位置开始绘制图案，因为 -character.x + character.x = 0，并且我们希望从左上角开始绘制屏幕的。现在你就拥有了!最后我们只需要使用context.save和context.restore将 Canvas 的原点改回屏幕的左上角即可得到最终结果!