如何在JavaScript中使用預加載的CSS spritesheet？

我正在使用HTML5畫布進行遊戲。我有一個大型的spritesheet，裏面包含了我在遊戲中需要的每個sprite。我已經讀了一些關於什麼可能是最好的預加載資產技術，我還沒有找到具體的東西。如何在JavaScript中使用預加載的CSS spritesheet？

所以，我決定我會選擇一種技術：CSS spritesheets。我已經使用了http://www.spritecow.com/，我已經加載了spritesheet.gif文件並生成了CSS代碼。問題是，我找不到任何關於如何在JavaScript和canvas元素中實際使用各個精靈的教程！

有人能幫我一下嗎？如果您知道任何其他預加載技術或庫更好（可以預加載圖像和聲音，如果可能的話）。

編輯：jQuery的解決方案也很好。

2013-02-17 Howie

你問有關如何預加載spritesheet或如何將其應用到元素呢？ – Roy 2013-02-17 15:00:34

嗯。我想都是這樣。我想在畫布中使用它。 – Howie 2013-02-17 15:01:46

預壓：

精靈表單只是一個形象，所以預裝像對其他任何圖像。這就是說，一個「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") }

2 - 添加IDS到您的元素，然後根據spritesheet上特定元素圖像的位置匹配css background-position規則。例如

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

CSS：

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

2013-02-17 15:13:53 Roy

回答