定義和用法

globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。

例:

 1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3 4 ctx.fillStyle="red"; 5 ctx.fillRect(20,20,75,50); 6 ctx.globalCompositeOperation="source-over"; 7 ctx.fillStyle="blue"; 8 ctx.fillRect(50,50,75,50); 9 10 ctx.fillStyle="red";11 ctx.fillRect(150,20,75,50);12 ctx.globalCompositeOperation="destination-over";13 ctx.fillStyle="blue";14 ctx.fillRect(180,50,75,50);

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 屬性。

注釋：Internet Explorer 8 以及更早的版本不支持 元素。

屬性值

藍色:源圖像 = 您打算放置到畫布上的繪圖。

紅色:目標圖像 = 您已經放置在畫布上的繪圖。

2.source-in 在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。

3.source-out 在目標圖像之外顯示源圖像。只會顯示目標圖像之外源圖像部分，目標圖像是透明的。

4.source-atop 在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。

5.destination-over 在源圖像上方顯示目標圖像。

6.destination-atop 在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示。

7.destination-in 在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。

8.destination-out 在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。

9.lighter 顯示源圖像 + 目標圖像。

10.copy 顯示源圖像。忽略目標圖像。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com