html5中globalCompositeOperation屬性是哪個

這篇文章主要為大家展示了html5中globalCompositeOperation屬性是哪個，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“html5中globalCompositeOperation屬性是哪個”這篇文章吧。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優(yōu)雅的前端網頁。

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會將源繪制在目標之上，但是在重合區(qū)域上兩者都是不透明的，繪制在其他位置上的目標是不透明的，源是透明的

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中globalCompositeOperation屬性是哪個”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業(yè)資訊頻道。