无法在Canvas

Question

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

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

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

这是我的代码：

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

初始化背景属性

this.background = new Image();

然后在我的地图的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()，

但地图并未显示背景图片。我的代码出了什么问题？

修改

现在我的代码已更改为：

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坐标？背景图像非常小，所以我重复显示它直到它填满画布。我想我刚刚描述的只能通过javascript代码来实现？

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

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

Answer 1

如果它是静态的（意味着不是滚动图像），那么就像在CSS中这样做一样简单

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