在html5畫布上繪制形狀時(shí)，可以設(shè)置如何將繪制的內(nèi)容與畫布上已繪制的內(nèi)容進(jìn)行合成。本文介紹如何將繪畫內(nèi)容與畫布上已有的內(nèi)容混合在一起. 畫布合成
2D上下文具有兩個(gè)屬性，這些屬性控制畫布的合成模式。這些是: globalAlpha
globalCompositeOperation globalAlpha該globalAlpha屬性確定繪制內(nèi)容的透明度/不透明度。它可以取0到1之間的值。0表示您繪制的內(nèi)容是完全透明的。值為0.5表示繪制的內(nèi)容是半透明的。值為1表示您繪制的內(nèi)容是完全不透明的。預(yù)設(shè)值為1。
該globalAlpha屬性設(shè)置如下: context.globalAlpha = 0.5; globalCompositeOperation該globalCompositeOperation屬性確定您繪制的內(nèi)容如何混合到畫布上的現(xiàn)有圖形中。
該globalCompositeOperation屬性設(shè)置如下: context.globalCompositeOperation = "copy"; globalCompositeOperation引用“源”和“目的地”，并指定如何混合源和目的地。源是您繪制的內(nèi)容，目的地是已經(jīng)繪制的內(nèi)容。以下是可能值及其含義的列表:
|
| | 值 | 描述 | | copy | 源和目標(biāo)重疊的地方，顯示源。 | | destination-atop | 源和目標(biāo)重疊，并且兩者都不透明時(shí)，將顯示目標(biāo)。如果目標(biāo)是透明的，則顯示源。 | | destination-in | 在源和目標(biāo)重疊且兩者都不透明的地方，將顯示目標(biāo)。沒(méi)有重疊的地方不會(huì)顯示源。 | | destination-out | 在源和目標(biāo)不重疊的任何地方顯示目標(biāo)。在其他任何地方都顯示透明性。 | | destination-over | 源和目標(biāo)重疊的地方顯示目標(biāo)。如果沒(méi)有重疊，則顯示源。 | | source-atop | 源和目標(biāo)重疊的地方，顯示源。沒(méi)有重疊的地方，或者源是透明的，將顯示目標(biāo)。 | | source-in | 當(dāng)源和目標(biāo)重疊且兩者都不透明時(shí)，將顯示源。其他任何地方都會(huì)顯示透明性。 | | source-out | 源和目標(biāo)不重疊的地方，將顯示源。在其他任何地方都顯示透明性。 | | source-over | 當(dāng)源不透明時(shí)，將顯示源。目的地顯示在其他任何地方。 | | lighter | 源顏色和目標(biāo)顏色相互疊加，從而使顏色更亮，朝著1的顏色值（該顏色的最大亮度）移動(dòng)。 | | xor |
|
| 
