無法在畫布上添加背景圖片

Question

我正在構建一個在背景圖像上運行的游戲。 圖像位於路徑../images/bg.jpg 。

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

現在在map.js ，我將使用圖像作為背景圖案，並為游戲創建背景。

這是我的代碼：

在我的地圖中，有一個init方法，其中我使用以下方法初始化background屬性

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插件不知道將背景圖像放在build文件夾中的位置。

最后，我使用了一個名為copy-webpack-plugin將我的靜態文件復制到構建目錄，然后使用樣式表解決方案可以顯示背景圖像。

但是，這不是我想要的效果。

在我的游戲中，我的背景非常大，我希望背景看起來完全像地面，好像我在地面上掉了東西一樣，當我移開時，那東西會留在地面的同一位置。

但是，如果我在樣式表中設置了背景圖片，則當我將鼠標移至框架的另一端時，剛放下的東西將遠離該點。 如何使對象停留在背景的同一點上，而不僅僅是x和y坐標？ 背景圖片很小，因此我要使其反復顯示，直到它填滿畫布為止。 我猜我剛剛描述的內容只能通過javascript代碼實現嗎？

這是一張圖片，以解釋我對預期背景的看法：

例如，如果我們看上面的圖片，背景圖像包含一個月亮，並且我在背景頂部繪制了一些星星。 在左圖中，我的鼠標在屏幕的右下角。 現在，我移動了鼠標，框架也移動了，因為我想展示如何轉到畫布的另一端。 右圖顯示我的鼠標現在位於框架的右上方，這意味着我的鼠標已移至頂部。 現在，星星和月亮保持它們的相對位置，但是它們的y坐標應該在我的鼠標下面。

Answer 1

如果它是靜態的（不是滾動圖像），那么就像在CSS中一樣簡單

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