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 

...