javascript - 如何在 javascript 中使用预加载的 CSS spritesheet？

Question

我正在使用 HTML5 画布制作游戏。我有一个大精灵表，其中包含我在游戏中需要的每个精灵。我已经阅读了一些关于什么可能是最好的预加载资产技术，但我还没有找到任何具体的东西。

所以，我决定只选择一种技术：CSS spritesheets。我使用了http://www.spritecow.com/加载 spritesheet.gif 文件并生成 CSS 代码的地方。问题是我找不到任何关于如何在 javascript 和 canvas 元素中实际使用单个精灵的教程！

有人可以帮帮我吗？如果您知道任何其他更好的预加载技术或库（如果可能，可以预加载图像和声音）。

编辑：使用 jQuery 的解决方案也很好。

score 2 · Accepted Answer

预加载：

精灵表只是一个图像，所以像任何其他图像一样预加载。也就是说，“jQuery 方式”将是：var $mySprite = $("<img>").attr("src", "myURL");

应用于元素：

无需使用 javascript，因为这可以通过简单的 css 完成。

1 -sprite为每个使用 spritesheet 的元素添加一个类：

html: <div class="sprite">

CSS： .sprite { background-image:url("your spritesheet url here") }

background-position2 -根据特定元素图像在 spritesheet 上的位置，为您的元素添加 id，然后匹配 css规则。例如

html: <div class="sprite" id="fire"></div>

CSS：

#fire {
  background-position: -100px -50px;
  height: 20px;
  width:  40px;
}

1 回答 1