使用multipe HTML5畫布對層圖像

我開始了一個基於網絡遊戲引擎而回，但主要用於jQuery來處理精靈和動畫，現在我正在學習HTML5的強大功能，通過遊戲畫布轉移到HTML5。所以這裏是我遇到的問題：我使用從http://html5.litten.com/layers/canvaslayers.html建議的多層畫布圖層。使用multipe HTML5畫布對層圖像

這不是爲我工作，即使我的z-index設置爲999999：這是我的代碼 - >

http://snipt.org/xoKn

的對象層是不是在瓷磚之上，謝謝！

來源

2011-10-10 theprestig3

如果有人有類似的問題，我設法通過加載所述第一層第一然後最後最低層解決這個問題。顯然，無論首先裝載什麼，都會成爲最重要的。

所以我的解決辦法是隻着法m對象環路我上面的瓷磚循環。有趣的是，我不知道它首先加載的重要。

來源

2011-10-11 19:40:33 theprestig3

的代碼應工作（至少在畫布處理部分）。我看了你的腳本，加載圖像可能會有問題。您有

var tile = new Image(); 
tile.src = tiles[i]['bg']; 
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);

但它不起作用，因爲圖像尚未加載。相反，你應該使用

tile.onload = function(){ 
    tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32); 
}

或類似的東西（即你不會有到i變量的引用，因此需要對其進行修改）。

注意，在本教程中，他們使用setInterval(drawAll, 20);這使得一段時間後工作（因爲所有的圖像將被加載的時間後）。

當然，你可能會失去圖像排序（雖然這看起來並不重要），所以preloading開頭的所有圖像，然後一次繪製它們是一個好主意。試一試，讓我們現在，如果它的工作！

來源

2011-10-10 07:31:39 freakish

如果我用你的建議，然後將圖像對象將不存在瓦片，從而加載什麼都沒有。我的變量是索引我的數組在我的for循環。 setInterval只設置一個20毫秒的延遲，並且每20毫秒重複一次該函數。我不知道爲什麼圖像不加載在tilesCanvas頂部。例如，如果我不加載tilesCanvas，那麼對象會自行加載。事情就是一切都被加載，但瓷磚正在被加載到對象的頂部，使它到我看不到它們的地方。在這種情況下，只有1個對象被加載。 – theprestig3

我明白'i'變量是一個索引。 :)仍然預加載是一個不錯的選擇。不幸的是我不知道PHP，我不知道你的腳本是幹什麼的。 :) SetInterval可能不適用於（讓我們說）前10個電話，但它會稍後。但現在我正確理解你的問題。我不明白爲什麼這個代碼不適合你（假設圖像被加載）。它應該（它適用於我）。也許其他一些腳本/樣式表會覆蓋您的z-index？我沒有想法。 :) – freakish

非常感謝您的時間和精力，我想我會一直玩，看看會發生什麼。可能是小事，我只是沒有抓住。對於我來說，這真是第3天的HTML5，我再次感謝幫助。 – theprestig3

使用multipe HTML5畫布對層圖像

回答

相關問題