html5畫布繪製多重圖像和重疊

Question

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

Answer 1

假設您只關心將下一個圖像渲染到已經渲染的圖像「前面」或「後面」的畫布上（即，不是事後渲染圖像'您已經在畫布上呈現的兩個圖像）使用2d畫布上下文的globalCompositeOperation屬性。 MDN有an illustrative example和comprehensive documentation。基本上，在你的情況下，如果你想渲染下面的圖像'上面'，你會使用"source-over"作爲這個屬性的值，如果你想渲染它現有的內容，使用"destination-over"。

如果您想要更詳細地控制2個以上圖像的重疊，您將不得不調整它們的渲染順序（如目前爲止的註釋中所建議的那樣）（即將圖像放在數組中，對數組進行排序以期望的方式，然後渲染它們）。

Answer 2

頂部的圖像始終是繪製的最後一個圖像。

當我選擇一個圖像時，我使用的一種解決方案是將所有圖像存儲在數組中 - 這也將是繪製順序 - 並且將圖像置於頂部，數組並放置在最後，因此位於頂部。