HTML5画布：组成-IGI

时间：2020-01-09 10:34:36 　来源:igfitidea点击:

在HTML5画布上绘制形状时，可以设置如何将绘制的内容与画布上已绘制的内容进行合成。换句话说，如何将绘制的内容与画布上已存在的内容混合在一起。

2D上下文具有两个属性，这些属性控制画布的合成模式。这些是：

globalAlpha全局字母

" globalAlpha"属性决定了所绘制内容的透明度/不透明度。它可以取0到1之间的值。0表示我们绘制的内容是完全透明的。值为0.5表示绘制的内容是半透明的。值为1表示我们绘制的内容是完全不透明的。预设值是1.

globalAlpha属性设置如下：

context.globalAlpha = 0.5;

" 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`

注意：在撰写本文时，Firefox和Chrome处理这些合成模式的方式有所不同。它似乎也不同于例如rect并输入文本模式的工作方式。在计划支持的各种浏览器中试用各种模式，以了解它们的工作方式。