html5 Canvas之画布合成的属性总结

Posted 2021-04-29 经验轮

首先解释一下合成的含义，合成是指如何精细控制画布上面的对象的透明度和分层效果。其中控制Canvas画布合成的操作的两个属性分别是：globalAlpha和globalCompositeOperation

一、globalAlpha：这个属性的默认值是1.0（完全不透明），并且可以设置从0.0（完全透明）到1.0的值，需要注意的是，这个属性必须在图形绘制之前设置

二、globalCompositeOperation：这个属性的值在globalAlpha以及所有变换都生效后控制在当前Canvas位图中绘制图形。它有多个值，下面一一做解释，在下面讲到的“A”是指要绘制在画布上的形状，“B”是指显示在画布上的位图

1、Copy：二者重叠，显示A而不显示B

2、destination-atop：B位于A上，二者重叠且都不透明的地方显示B,A不透明而B透明的地方显示A,其余显示透明

3、destination-in：B在A内，二者都不透明的地方显示B，其余显示透明

4、destination-out：B在A外，B不透明而A透明的地方显示B，其余显示透明

5、destination-over：B覆盖A，B不透明的地方显示B，其余显示A

6、lighter：A加B,显示A和B之和，色值接近1.0

7、source-atop：A在B之上，二者重叠且都不透明的地方显示A，B不透明而A透明的地方显示B，其余显示透明

8、source-in：A在B内，二者都不透明的地方显示A，其余显示透明

9、source-over：（默认值）A覆盖B,A不透明的地方显示A，其余显示B

10、source-out：A在B外，A不透明的地方而B透明的地方显示A，其余显示透明

11、xor：这个只能意会不能言传，自己赋值看效果就可以了。

使用方法如下所示：

上面代码在浏览器中的预览效果如下：

在这里小编给一个小编做程序多年的经验：

1、context.globalCompositeOperation = "destinationatop";这种写法在浏览器中是不能正常使用的

2、如果要变换新绘制的形状，必须用到Canvas函数中的save()和restore()两个函数

save() 保存当前状态到堆栈

restore() 调出最后储存的堆栈恢复画布

3、globalAlpha属性只影响设置之后的形状