在CanvasRenderingContext2D中合併多個路徑以作爲集合填充和描邊

Question

我正在使用CanvasRenderingContext2D中的路徑繪製一組重疊形狀。這很好，但我現在想要統一所有這些路徑，以便當我使用半透明顏色填充時，不顯示重疊。另外我想要描繪一個統一形狀的輪廓。有關如何實現這一目標的任何建議？

Answer 1

謝謝Mark但是我想我已經找到了一個更好的方法來做到這一點。

我在空白位圖數據上繪製我的形狀，然後將其用作alpha蒙版...

Answer 2

如果您不希望重疊的半透明像素進行交互，可以將半透明像素（RGBA格式）更改爲等效不透明像素（RGB格式）。

function RGBAtoRGB(r, g, b, a, backgroundR,backgroundG,backgroundB){ 
    var r3 = Math.round(((1 - a) * backgroundR) + (a * r)) 
    var g3 = Math.round(((1 - a) * backgroundG) + (a * g)) 
    var b3 = Math.round(((1 - a) * backgroundB) + (a * b)) 
    return "rgb("+r3+","+g3+","+b3+")"; 
} 

您必須使用單獨的beginPath繪製每個子形狀。這是必要的，因爲每個beginpath只能獲得一個樣式（樣式== fillStyle）。

根據您的設計要求，您可能需要重新排列子圖形的繪製順序，以便將所需的不透明形狀置於頂部。