Javascript從Sprite中獲取圖像對象

Question

我想使用spritesheet來減少tile遊戲的HTTP請求次數。

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

精靈64像素高，包含64乘64像素的瓷磚。

下面的代碼獲取單個圖像，並開始呈現：

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

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

我的問題是，我怎麼能檢索這個單獨的圖像對象？

Answer 1

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

例如可以說，而不是img你在你的JavaScript有

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

現在，您可以使用以下

... 

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

...