如何在html5画布中的图层之间插入图像

Question

我需要能够在画布中分层图像......如何在两个图层之间插入图像，或者订购图像，更像photoshop中的图层...顶部或以下。事实上，我alredy画很多图像，我需要能够插入一个之间，或者只是使用一个假人，稍后改变它，我不知道

这是怎么做的？

Answer 1

最简单的方法是将所有元素堆叠到父容器中，并调整每个图层的CSS属性。

z-index越高，层越靠近堆栈的顶端。具有较低值的元素z-index值受到具有较高值的​​元素的阻碍。

请注意，您可能必须在容器内的每个图层上设置position: absolute;，然后将它们对齐到父元素的左上角。否则他们不会相互重叠。

或者，您可以根据它们在DOM树中的位置来管理图层。元素在DOM中定义的越晚，它越接近层堆栈的顶部（当然，抛开CSS属性）。因此，理论上可以使用insertBefore()或土布insertAfter()将图层放置在DOM中的所需位置并避免操作。