《HTML5 Canvas開發詳解》——2.6 在畫布上合成

本節書摘來自異步社群《html5 canvas開發詳解》一書中的第2章，第2.6節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

合成是指如何精細控制畫布上對象的透明度和分層效果。有兩個屬性可以控制canvas合成操作：globalalpha和globalcompositeoperation。

globalalpha。globalalpha canvas屬性的預設值為1.0（完全不透明），并且可以設定從0.0（完全透明）到1.0的值。這項canvas屬性必須在圖形繪制之前設定。

globalcompositeoperation。globalcompositeoperation的值在globalalpha以及所有變換都生效後控制在目前canvas位圖中繪制圖形。

在下面的清單中，“源圖形”是指要繪制在畫布上的形狀，“目标圖形”是指顯示在畫布上的位圖。

copy。二者重疊，顯示源圖形而不顯示目标圖形。

destination-atop。目标圖形位于源圖形上，二者重疊且都不透明的地方顯示目标圖形，源圖形不透明而目标圖形透明的地方顯示源圖形，其餘顯示透明。

destination-in。目标圖形在源圖形内，二者都不透明的地方顯示目标圖形，其餘顯示透明。

destination-out。目标圖形在源圖形外，目标圖形不透明而源圖形透明的地方顯示目标圖形，其餘顯示透明。

destination-over。目标圖形覆寫源圖形，目标圖形不透明的地方顯示目标圖形，其餘顯示源圖形。

lighter。源圖形加目标圖形，顯示源圖形和目标圖形之和，色值趨近于1.0為限。

source-atop。源圖形在目标圖形之上，二者重疊且都不透明的地方顯示源圖形，目标圖形不透明而源圖形透明的地方顯示目标圖形，其餘顯示透明。

source-in。源圖形在目标圖形内，二者都不透明的地方顯示源圖形，其餘顯示透明。

source-out。源圖形在目标圖形外，源圖形不透明而目标圖形透明的地方顯示源圖形，其餘顯示透明。

source-over。（預設）源圖形覆寫目标圖形，源圖形不透明的地方顯示源圖形，其餘顯示目标圖形。

xor。源圖形xor目标圖形，即異或源圖形和目标圖形。

例2-6顯示這些值如何影響形狀繪制，結果如圖2-11所示。

如例2-6所示，這裡測試了globalcompositeoperation和globalalpha canvas屬性。當指定字元串為sourceover時，實際上是将globalcompositeoperation重設回預設值。然後建立了幾個紅色方形來顯示不同的合成選項群組合。注意，destination-atop切換到目前canvas位圖之下的新繪制形狀，globalalpha屬性隻影響設定之後所畫的形狀。這意味着不必為繪制新的形狀設定新的透明度而使用save()和restore() canvas對狀态進行操作。

在2.7節将講解一些影響整個畫布的變換。是以，如果要變換新繪制的形狀，必須使用save()和restore()函數。