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

Question

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

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

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

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

Answer 1

预加载:

A sprite sheet is just an image, so preload like you would any other image. That said, a "jQuery way" would be: var $mySprite = $("<img>").attr("src", "myURL");

(来源:Preload a spritesheet using Jquery)

应用于元素:

无需使用 JavaScript，因为这可以通过简单的 CSS 来完成。

1 - 添加 sprite类到每个使用 spritesheet 的元素:

html: <div class="sprite">

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

2 - 将 id 添加到元素中，然后匹配 css background-position规则，根据 spritesheet 上特定元素图像的位置。例如

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

CSS:

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