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

<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

...