HTML5畫布不保留繪製順序

Question

我想畫一個建築物的粗略輪廓。 我通過爲每個邊創建一系列正方形，再加上頂部「頂」，然後基本按照Painter的算法依次繪製它們，從而實現以下效果。

左邊的屏幕截圖顯示了它的外觀。這是分別繪製每個正方形。

爲了提高性能，我希望儘可能少的.stroke（）和.fill（）調用，所以我排隊調用所有moveTo（）和lineTo（）調用，並將它們全部繪製在一個大的範圍內。 測試表明（至少對於行）這提供了大量的性能改進，並且我自己對其進行了驗證。

不幸的是，你可以從右側的截圖看到，當我在最後繪製建築物時，分層基本上被破壞。它以一種看似隨機的順序來繪製事物。

畫布應該以這種方式工作嗎？爲什麼它不按照我告訴它像第一個截圖那樣繪製的順序繪製所有內容？ 有沒有人知道這種行爲很好的解決辦法？

Answer 1

如果你發送它所有的moveTos和lineTos等爲一體的大批量，它會吸引他們，如果你是一個渲染大形（你想看到所有的內招）。

運行多個繪製操作時性能會受到很小的影響，但通常不值得讓代碼更難以理解和調試。