HTML5 и Canvas. Возможно ли использовать несколько слоев + z-index?

Вопрос

Подскажите пожалуйста, можно ли в Canvas создавать слои? Меня интересует такая возможность, потому что я хочу позиционировать группы элементов, выдвигать их на передний план и наоборот, короче говоря, менять их z-index (или как там это свойство называется?). Я знаю, что подобное можно делать с помощью некоторых фреймворков, например jCanvaScript, но меня интересует бесплагинное решение.


Ответ №1

К сожалению, у объектах, которые рисуются в Canvas, нет свойства z-index. Их также нельзя группировать в слои. Каждый новый объект рисуется поверх всех остальных. Однако, Вашу проблему можно решить использованием нескольких Canvas-ов в документе. Просто разместите их поверх друг друга и задайте нужный z-index. Рисуйте в каждом канвасе, как будто это и есть отдельный слой.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Нет комментариев

Добавить комментарий


(обязательно)