在HTML5畫布上繪制形狀時(shí)，可以設(shè)置如何將繪制的內(nèi)容與畫布上已繪制的內(nèi)容進(jìn)行合成。本文介紹如何將繪畫內(nèi)容與畫布上已有的內(nèi)容混合在一起.
2D上下文具有兩個(gè)屬性，這些屬性控制畫布的合成模式。這些是:
globalAlpha
globalCompositeOperation
該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屬性確定您繪制的內(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)。沒有重疊的地方不會(huì)顯示源。 |
destination-out | 在源和目標(biāo)不重疊的任何地方顯示目標(biāo)。在其他任何地方都顯示透明性。 |
destination-over | 源和目標(biāo)重疊的地方顯示目標(biāo)。如果沒有重疊，則顯示源。 |
source-atop | 源和目標(biāo)重疊的地方，顯示源。沒有重疊的地方，或者源是透明的，將顯示目標(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 |
這是一個(gè)示例畫布，您可以在其中使用合成模式和alpha值。您可以通過單擊按鈕來更改合成模式。通過使用畫布下方的控件可以更改Alpha模式。
globalAlpha
如果看到的文本字段globalAlpha，請(qǐng)輸入0到100之間的值。代碼會(huì)將值轉(zhuǎn)換為0到1.0之間的值。否則，請(qǐng)使用滑塊。
注意：在撰寫本文時(shí)，F(xiàn)irefox和Chrome處理這些合成模式的方式有所不同。它也似乎與rects和text不同，這些模式如何工作。在您計(jì)劃支持的各種瀏覽器中試用各種模式，以了解它們的工作方式。