Как работать c позицией элементов в canvas?

Question

[Юрий Воронин]

Есть канвас элемент на странице. я в него загрузил картинку. при определенном событии я загружаю еще картинку (точно такую же, но с другим фоном). Новая картинка получается выше старой. Можно ли сделать, что бы она под старой появлялась? нужна аналогия с z-index в css
ЗЫ Работаю с fabrick.js

Comments

[twobomb]

Мож я чето не понял. Но зачем тебе тогда добавлять картинку если ее всеравно не будет видно из за старой.
Вообще подобие z-index в канвас это есть порядок отрисовки. Тоесть каждая новая отрисовка рисует поверх уже имеющегося. Сделайте массив объектов типа {src:http://url..., z-index: 1 }. Далее перед отрисовкой отсортируйте массив по z-index, и получится что вы будете рисовать сначала элементы с меньшим индексом и по возрастающей.

Answer 1

[alexalexes]

Не лучше ли background эксплуатировать для этих целей, меняя местами источники изображений?

<style>
      #elem1
      {
        display: block;
        width: 400px;
        height: 400px;
        background-image: url("back1.png"),
                          url("back2.png");
        transition: background-image 0.5s ease; /* для наглядности эффекта */
      }
    </style>
    <div id="elem1"></div>
    <script>
    var trigger = 0;
    setInterval(function()
    {
      var elem1 = document.getElementById('elem1');
      elem1.style.backgroundImage = trigger % 2 == 1 ? 'url("back1.png"), url("back2.png")' : 'url("back2.png"), url("back1.png")';
      trigger++;
    }, 1000);

    </script>

Answer 2

[Сергей]

Можно, почему нет? Создаете две канвы с одинаковой позицией - одна над другой и рисуете на них. Канвы и есть слои.

Answer 3

[Кирилл Горелов]

Смотришь в гугле jsfiddle canvas example И получаешь тысячи примеров твоей задачи.