Использование нескольких HTML5-холстов для наложения изображений

Question

Некоторое время назад я запустил игровой движок, основанный на веб-технологиях, но в основном использовал jQuery для обработки спрайтов и анимации, теперь я изучаю всю мощь HTML5, переместив игровой холст в HTML5. Итак, вот проблема, которая у меня возникла: я использую несколько холстов, как предложено из http://html5.litten.com/layers/canvaslayers.html, для наложения изображений.

Это не работает для меня, даже если я установил z-index на 999999: вот мой код ->

http://snipt.org/xoKn

Слой объектов находится не поверх плиток, спасибо!

Answer 1

Код должен работать (по крайней мере, часть обработки холста). Я посмотрел на ваш скрипт и может быть проблема с загрузкой изображений. У вас есть

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);, что заставляет его работать через некоторое время (поскольку через некоторое время все изображения будут загружены).

Конечно, вы можете потерять порядок изображений (хотя это не кажется важным), поэтому предварительно загрузив все изображения в начале, а затем нарисовав их все сразу, будет хорошей идеей. Попробуйте и дайте нам сейчас, если это работает!

Answer 2

Если у кого-то возникла подобная проблема, мне удалось решить ее, загрузив сначала первый слой, а затем самый нижний.Очевидно, что то, что загружается первым, будет сверху.

Поэтому я решил просто переместить цикл m объектов над циклом плиток.Интересно, я понятия не имел, какое значение имеет то, что загружается первым.