html5畫布繪制多個圖像並重疊

Question

我在畫布上繪制了多個圖像，但我希望用戶能夠定義圖像的重疊。 換句話說，用戶選擇出現在前面的圖像和出現在后面的圖像。 我怎么能做到這一點？

Answer 1

在為 randering 圖表創建 div 時使用“min-height”和“min-width”。

Answer 2

您可以做到這一點，假設您只關心將下一個圖像渲染在已經渲染的圖像“前面”或“后面”的畫布上（即不要事后渲染圖像“介於”已經渲染的兩個圖像之間）渲染在畫布上）使用 2d 畫布上下文的globalCompositeOperation屬性。 MDN 有一個說明性的例子和全面的文檔。 基本上，在您的情況下，如果您想在“上方”呈現下一張圖像，您可以使用"source-over"作為此屬性的值，如果您想將其呈現在現有內容的后面，請使用"destination-over" 。

如果您想更詳細地控制超過 2 個圖像的重疊，則必須按照目前評論中的建議調整它們的呈現順序（即將圖像放入數組中，以所需的方式對數組進行排序） ，然后渲染它們）。

Answer 3

頂部的圖像始終是最后繪制的圖像。

我在將圖像置於最前面時使用的解決方案是將所有圖像存儲在數組中 - 這也將是繪制順序 - 頂部的圖像只是從數組中取出並放置在最終，因此處於領先地位。