使用圖層或z-index在畫布上繪製形狀/文本

Question

使用for循環繪製幾個文本元素。 但我想要在所有其他元素上繪製第一個元素。 除了反轉循環，是否有一種方法可以爲繪製的元素（如文本或形狀）定義圖層編號？

Answer 1

不，HTML5 Canvas-like SVG-在渲染時使用"painters model"：立即放下的墨水在畫布上乾涸;連續的平局呼叫在結果之上。

此外，HTML5畫布 - 與SVG或HTML不同 - 使用non-retained (or immediate) graphics mode：發佈後，對應於原始繪圖命令的對象不會被保留。

的選項有：

• 更改您的循環，或以其他方式實現一個排隊的繪製調用自己的分層系統，然後發出他們從底部以頂部。

• 正如@Stoive建議的那樣，以編程方式創建單獨的（未顯示的）畫布元素，然後按照您喜歡的順序將結果繪製回主畫布。

• 在頁面上創建多個（顯示的）畫布，並使用CSS對它們進行分層，並將每個分層作爲其自己的圖層進行繪製。

的最後一個選項可以讓你最自由，包括能夠髒/清除只是一層在任何時間，或重新排序層，而不必自己recomposite他們。

Answer 2

在2D上下文中沒有canvas中的圖層概念 - 將其視爲可編程畫筆式應用程序。

但是，您可以使用context.drawImage將一個畫布繪製到另一個畫布上 - 因此，如果您將各個「圖層」保留在自己的畫布中，然後將它們組合成一個顯示，那麼可以模擬圖層的概念。