在画布中绘制的所有东西都是已经合成的,这意味着绘制的所有的东西都会与已经绘制的现有元素合并在一起。这些都是基本合成,只是将一些内容叠加到另一些内容之上。

1. 全局不透明度——globalAlpha属性

globalAlpha属性会影响将要绘制的对象的透明度,它的值必须在0.0(全透明)1.0(不透明)之间,默认值是1.0。通过给fillStyle设置一个小于1的alpha值的rgba值,也可以得到相同的效果。不同之处是,globalAlpha设置的是全局,它会在后续应用rgba颜色值等alpha值时被参照,即充当了计算其它alpha值的基数。(例子中设置了globalAlpha为0.5,然后又应用了一次fillStyle(带有alpha值为0.5的rgba),所以实际Alpha值为0.25)

2. 全局合成操作——globalCompositeOperation属性

一个全新的2D渲染上下文会在一开始就使用合成,即一个图形叠加到另一个图形之上,这种合成称为源覆盖于目标之上(source over destination)。

  • 源是绘制的新图形
  • 目标是绘制了图像的2D渲染上下文

globalCompositeOperation属性的默认值就是source-over,它定义了对2D渲染上下文上所有绘制图形执行的11种合成类型。

属性 含义
source-over 绘制的图形(源)将画在现有画布(目标)之上
destination-over 目标在源之上(与前一个相反)
source-atop 源在目标之上,只显示目标之内的源,目标之外的源变成透明
destination-atop 目标在源之上,只显示源之内的目标,源之外的目标变成透明
source-in 重叠区域绘制源,其它部分透明
destination-in 重叠区域绘制目标,其它部分透明
source-out 与目标不重叠区域绘制源,其它部分透明
destination-out 与源不重叠区域保留目标,整块源区域透明
lighter 与顺序无关,重叠区域颜色值相加,最大值255白色
copy 与顺序无关,只绘制源,覆盖掉目标
xor 与顺序无关,只绘制不重叠的区域,重叠区域透明

参考资料:《Foundation HTML5 Canvas For Games and Entertainment》Chapter 4 Authors: Hawkes, Rob