html5中globalCompositeOperation屬性的詳細介紹

本篇文章給大家帶來的內容是關於css3中background-orgin的使用方法（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

globalCompositeOperation的預設值屬性是source-over

1、source-over及源在目標之上

context.fillStyle = 'aqua';context.fillRect(50,50,100,100);//靶心圖表形context.globalCompositeOperation = 'source-over';context.fillStyle = 'antiquewhite';context.fillRect(100,100,100,100);//源圖形

上面圖形即為目標，下面圖形為源

2、destination-over目標在源上

3、source-atop會將源繪製在目標之上，但是在重合地區上兩者都是不透明的，繪製在其他位置上的目標是不透明的，源是透明的

context.fillStyle = 'aqua';context.fillRect(50,50,100,100);context.globalCompositeOperation = 'source-atop';context.fillStyle = 'antiquewhite';context.fillRect(100,100,100,100);

4、destination-atop與source-atop效果相反，在重疊部分兩者都不透明，但在其他位置源不透明，目標透明

5、source-in源與目標重疊部分只顯示源，其他部分都變成透明

6、destination-in 源與目標重疊部分，只顯示目標，其他都變成透明

7、source-out只顯示源未重疊部分，其他部分都不顯示

8、destination-out只顯示目標未重疊部分，其他部分都不顯示

9、lighter這個值與順序無關，如果源與目標重疊，就將兩個顏色值相加，得到顏色最大取值為255，取值為白色

10、copy只複製源

11、只複製源和目標不重疊部分，重疊部分透明