javascript - 无法在 Canvas 上添加背景图像

Question

我正在构建一个在背景图像上运行的游戏。该图像位于路径../images/bg.jpg。

-images
  -bg.jpg
-src
  -elements
    - source.js
  - map.js
  - main.js

现在在我的 map.js 中，我将使用该图像作为背景图案并为我的游戏制作背景。

这是我的代码:

在我的 map 中，有一个 init 方法，我使用

初始化背景属性

this.background = new Image();

然后在 map 的 render() 方法中，我执行以下操作:

this.ctx.save();
this.background.addEventListener('load', function() {

  var pattern = this.ctx.createPattern(background, 'repeat');
  this.ctx.fillStyle = pattern;
  this.ctx.fillRect(0, 0, 10000, 10000);
});
this.background.src = "../images/bg.jpg";
this.ctx.restore();

在我的 main.js 中，我调用 map.render()，

但是 map 不显示背景图片。我的代码有什么问题吗？

编辑:

现在我的代码已更改为:

this.ctx.save();
var drawBackground = function () {
      alert('Hit me');
      var pattern = this.ctx.createPattern(background, 'repeat');
      this.ctx.fillStyle = pattern;
      this.ctx.fillRect(0, 0, 10000, 10000);
    }

    this.background.addEventListener('load', drawBackground, false);
    this.background.src = "../images/bg.jpg";
    this.ctx.restore();

但奇迹并没有发生，我也没有收到“打我”警报。我很困惑。

新编辑:

这似乎是一个路径问题，我已通过将图像放置到正确的文件夹中来解决。这是因为我将 webpack 插件与 Node.js 一起使用，并且 webpack 插件不知道将我的背景图像放置在构建中的位置文件夹，如果我不具体说明的话。

最后我使用了一个名为 copy-webpack-plugin 的插件将静态文件复制到构建目录，然后使用样式表解决方案可以显示背景图像。

但这不是我想要的效果。

在我的游戏中，我有一个非常大的背景，我希望背景看起来与地面完全一样，就好像我把什么东西掉在地上一样，当我离开时，那个东西会停留在地面的同一位置。

但是，如果我在样式表中设置背景图像，当我将鼠标移动到框架的另一端时，我刚刚放下的东西就会从该位置移开。如何使对象保持在背景的同一位置，而不仅仅是相同的 x 和 y 坐标？背景图像非常小，所以我让它重复显示，直到它填满 Canvas 。我想我刚才描述的只能通过javascript代码来实现？

这是一张图片来解释我对预期背景的想法:

例如，如果我们看上面的图片，背景图像包含一个月亮，我在背景顶部画了一些星星。在左图中，我的鼠标位于屏幕的右下角。现在我移动鼠标，框架也会移动，因为我想展示如何到达 Canvas 的另一端。右图显示我的鼠标现在位于框架的右上角，这意味着我的鼠标已移向顶部。现在星星和月亮保持它们的相对位置，但它们的 y 坐标应该在我的鼠标坐标下方。

Answer 1

如果它是静态的(意味着不是滚动图像)，则就像在 CSS 中执行此操作一样简单

.your-canvas { 
   background:url("../images/bg.jpg"); 
}