HTML5 Canvas 转换HTML5 Canvas 绘制图像
HTML5 Canvas 合成
在HTML5画布上绘制形状时，可以设置如何将绘制的内容与画布上已绘制的内容进行合成。本文介绍如何将绘画内容与画布上已有的内容混合在一起.
画布合成
2D上下文具有两个属性，这些属性控制画布的合成模式。这些是:
globalAlphaglobalCompositeOperation
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 |
HTML5画布组成示例
这是一个示例画布，您可以在其中使用合成模式和alpha值。您可以通过单击按钮来更改合成模式。通过使用画布下方的控件可以更改Alpha模式。
globalAlpha
如果看到的文本字段globalAlpha，请输入0到100之间的值。代码会将值转换为0到1.0之间的值。否则，请使用滑块。
注意：在撰写本文时，Firefox和Chrome处理这些合成模式的方式有所不同。它也似乎与rects和text不同，这些模式如何工作。在您计划支持的各种浏览器中试用各种模式，以了解它们的工作方式。
HTML5 Canvas 转换HTML5 Canvas 绘制图像