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