使用不同的 globalCompositeOperation 值繪制矩形。藍色矩形是目標圖像。紅色矩形是源圖像。
定義和用法
globalCompositeOperation屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。
源圖像 = 您打算放置到畫布上的繪圖。
目標圖像 = 您已經放置在畫布上的繪圖。
屬性值
| 值 | 描述 |
|---|---|
| source-over | 默認。在先繪制的圖形上顯示后繪制的圖形。相交部分由后繪制的圖形填充(顏色,漸變,紋理)覆蓋 |
| source-atop | 在先繪制的圖形頂部顯示后繪制的圖形。后繪制的圖形位於先繪制的圖形之外的部分是不可見的。 |
| source-in | 在先繪制的圖形中顯示后繪制的圖形。只繪制相交部分,由后繪制圖形的填充覆蓋,其余部分透明。 |
| source-out | 在先繪制的圖形之外后繪制的圖形。只繪制后繪制圖形不相交的部分,由后繪制圖形的填充覆蓋,其余部分透明。 |
| destination-over | 在后繪制的圖形上方顯示先繪制的圖形, 相交部分由先繪制圖形的填充(顏色,漸變,紋理)覆蓋. |
| destination-atop | 在后繪制的圖形頂部顯示先繪制的圖形。源圖像之外的目標圖像部分不會被顯示。 |
| destination-in | 在后繪制的圖形中顯示先繪制的圖形。只繪制相交部分,由先繪制圖形的填充覆蓋,其余部分透明 |
| destination-out | 在后繪制的圖形外顯示先繪制的圖形。只有后繪制的圖形外的目標圖像部分會被顯示，源圖像是透明的。 |
| lighter | 相交部分由根據先后圖形填充來增加亮度。 |
| copy | 顯示后繪制的圖形。只繪制后繪制圖形。 |
| xor | 相交部分透明。 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 canvas{ 8 border: 1px solid #d3d3d3; 9 margin-top: 10px; 10 margin-bottom: 20px; 11 } 12 </style> 13 </head> 14 <body> 15 <script> 16 var gco = new Array(); 17 gco.push("source-atop"); 18 gco.push("source-in"); 19 gco.push("source-out"); 20 gco.push("source-over"); 21 gco.push("destination-atop"); 22 gco.push("destination-in"); 23 gco.push("destination-out"); 24 gco.push("destination-over"); 25 gco.push("lighter"); 26 gco.push("copy"); 27 gco.push("xor"); 28 for(var n=0;n<gco.length;n++){ 29 document.write("<div id='p_"+n+"' style='float:left';"+gco[n]+":<br/>"); 30 var c = document.createElement("canvas"); 31 c.width = 120; 32 c.height = 100; 33 document.getElementById('p_'+n).appendChild(c); 34 var ctx = c.getContext('2d'); 35 ctx.fillStyle = "blue"; 36 ctx.fillRect(10,10,50,50); 37 ctx.globalCompositeOperation = gco[n]; 38 ctx.beginPath(); 39 ctx.fillStyle = "red"; 40 ctx.arc(50,50,30,0,2*Math.PI); 41 ctx.fill(); 42 document.write("</div>"); 43 } 44 </script> 45 </body> 46 </html>