Javascript從Sprite獲取圖像對象

Question

我想使用一張Spritesheet減少平鋪游戲的HTTP請求次數。

假設有大約2000種不同類型的圖塊，那么每次加載游戲時，請求的數量就會減少2000。

該精靈高度為64像素，包含64 x 64像素的圖塊。

以下代碼檢索單個圖像並開始渲染：

var tiles = new Image();
tiles.src = "tiles.png";

tiles.onload = function() {
    startRendering();
};

我的問題是，如何從中檢索單個Image對象？

Answer 1

您將無法使用純JS做到這一點。 恐怕，您將不得不使用CSS來實現這一點。

例如，假設您有一個img而不是img

<span class="imageholder" style="padding: 64px;"></span>

現在，在您的JavaScript中，您可以使用以下代碼

...

tiles.backgroundImage = 'url(tiles.png)';
tiles.backgroundPosition = '0px 0px'; // apply the position to get any of the image at any position

...