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

Question

我正在使用HTML5画布制作游戏。我有一个大的spritesheet，其中包含我在游戏中需要的每个精灵。我已经阅读了一些可能是最好的预加载资产技术，但我没有发现任何具体的内容。

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

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

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

Answer 1

预加载：

  

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

（资料来源：Preload a spritesheet using Jquery）

申请元素：

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

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

html： <div class="sprite">

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

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

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

css：

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