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屬性的詳細介紹的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。