如何在html5畫布中的圖層之間插入圖像

Question

我需要能夠在畫布中分層圖像......如何在兩個圖層之間插入圖像，或者訂購圖像，更像photoshop中的圖層...頂部或以下。事實上，我alredy畫很多圖像，我需要能夠插入一個之間，或者只是使用一個假人，稍後改變它，我不知道

這是怎麼做的？

Answer 1

最簡單的方法是將所有元素堆疊到父容器中，並調整每個圖層的CSS屬性。

z-index越高，層越靠近堆棧的頂端。具有較低值的元素z-index值受到具有較高值的​​元素的阻礙。

請注意，您可能必須在容器內的每個圖層上設置position: absolute;，然後將它們對齊到父元素的左上角。否則他們不會相互重疊。

或者，您可以根據它們在DOM樹中的位置來管理圖層。元素在DOM中定義的越晚，它越接近層堆棧的頂部（當然，拋開CSS屬性）。因此，理論上可以使用insertBefore()或土布insertAfter()將圖層放置在DOM中的所需位置並避免操作。