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、只複製來源和目標不重疊部分，重疊部分透明

 相關建議：

HTML5中屬性download的詳細介紹

#詳細介紹H5彈性盒佈局的使用（父容器屬性）

以上是html5中globalCompositeOperation屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！