【HTML5】Canvas之globalCompositeOperation属性详解

globalCompositeOperation即Canvas中的合成操作。

1、source-over

这是默认值,他表示绘制的图形将画在现有画布之上



	
		
		
		
		
	
	
		
	


【HTML5】Canvas之globalCompositeOperation属性详解_第1张图片

2、destination-over

这个操作的值与前一个值相反,所以现在目标绘制在源之上



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第2张图片

3、source-atop

这个操作会将源绘制在目标之上,但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的,但源是透明的。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第3张图片

4、destination-atop

这个操作与source-atop相反,目标绘制在源之上



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第4张图片


5、source-in

在源于目标重叠的区域只绘制源,而不重叠的部分编程透明的。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第5张图片


6、destination-in

这个操作与source-in相反,在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第6张图片

7、source-out

在与目标不重叠的区域上绘制源,其他部分都变成透明的。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第7张图片


8、destination-out

在与源不重叠的区域上保留目标。其他部分都变成透明的。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第8张图片

9、lighter

这个值与顺序无关,如果源与目标重叠,就将两者的颜色值想家。得到的颜色值的最大取值为255,结果就为白色。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第9张图片


10、copy

这个值与顺序无关,只绘制源,覆盖掉目标。



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第10张图片

11、xor

这个值与顺序无关,只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的



	
		
		
		
		
	
	
		
	

【HTML5】Canvas之globalCompositeOperation属性详解_第11张图片








你可能感兴趣的:(HTML5)