Как вставить изображение между слоями в html5 canvas

Question

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

как это сделать?

Answer 1

Самый простой способ сделать это - просто сложить все ваши элементы в родительском контейнере и настроить свойство z-index CSS каждого слоя.

Чем выше значение z-index, тем ближе слойнаходится на вершине стека.Элементам с более низкими значениями z-index препятствуют элементы с более высокими значениями.

Обратите внимание, что вам, вероятно, придется установить position: absolute; для каждого слоя в контейнере, а затем выровнять их, скажем, по левому верхнему углу.угол родительского элемента.В противном случае они не будут перекрывать друг друга.

Кроме того, вы можете управлять слоями на основе их положения в дереве DOM.Чем позже элемент будет определен в DOM, тем ближе он будет к вершине стека вашего слоя (конечно, без свойств CSS).Таким образом, теоретически вы можете использовать insertBefore() или homespun insertAfter(), чтобы разместить ваши слои в нужном месте в DOM и избежать манипуляции z-index.