当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式，globalAlpha可以指定图形的透明度。
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
ctx.globalCompositeOperation = ‘source-over‘; 默认设置
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{padding: 0;margin:0;}
8 body{background: #1b1b1b;}
9 #div1{margin:50px auto; width:300px; height: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14 var c=document.getElementById("myCanvas");
15 var ctx=c.getContext("2d");
16
17 ctx.fillStyle="red";
18 ctx.fillRect(20,20,75,50);
19 ctx.fillStyle="blue";
20 ctx.globalCompositeOperation="source-over"; //在目标图像上显示源图像。
21
22 ctx.fillRect(50,50,75,50);
23 ctx.fillStyle="red";
24 ctx.fillRect(150,20,75,50);
25 ctx.fillStyle="blue";
26 ctx.globalCompositeOperation="destination-over"; //在源图像上方显示目标图像。
27 ctx.fillRect(180,50,75,50);
28 };
29
30 </script>
31 </head>
32 <body>
33 <div id="div1">
34 <canvas id="myCanvas" width="300" height="300"></canvas>
35 </div>
36 </body>
37 </html>
结果：
属性值：
| source-over | 默认。在目标图像上显示源图像。 |
| source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
| source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。 |
| source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。 |
| destination-over | 在源图像上方显示目标图像。 |
| destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
| destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。 |
| destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 |
| lighter | 显示源图像 + 目标图像。 |
| copy | 显示源图像。忽略目标图像。 |
| source-over | 使用异或操作对源图像与目标图像进行组合。 |
eg:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 canvas{border:1px solid #d1d1d1; margin:20px 20px 20px 0}
8 </style>
9
10 </head>
11 <body style="margin: 50px;">
12 <script type="text/javascript">
13
14 var gco=new Array();
15 gco.push("source-atop");
16 gco.push("source-in");
17 gco.push("source-out");
18 gco.push("source-over");
19 gco.push("destination-atop");
20 gco.push("destination-in");
21 gco.push("destination-out");
22 gco.push("destination-over");
23 gco.push("lighter");
24 gco.push("copy");
25 gco.push("xor");
26
27 for (i=0;i<gco.length;i++){
28 document.write("<div id=‘p_" + i + "‘ style=‘float:left;‘>" + gco[i] + ":<br>");
29 var c=document.createElement("canvas");
30 c.width=120;
31 c.height=100;
32 document.getElementById("p_" + i).appendChild(c);
33 var ctx=c.getContext("2d");
34 ctx.fillStyle="blue";
35 ctx.fillRect(10,10,50,50);
36 ctx.globalCompositeOperation=gco[i];
37 ctx.beginPath();
38 ctx.fillStyle="red";
39 ctx.arc(50,50,30,0,2*Math.PI);
40 ctx.fill();
41 document.write("</div>");
42 }
43
44 </script>
45 </body>
46 </html>
结果：
时间： 2024-08-10 05:55:36