canvas图形的组合与裁切
当两个或两个以上的图形存在重叠区域时，默认情况下一个图形画在前一个图像之上。通过指定图像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>
结果：
2、裁切路径
ctx.clip(); clip的作用是形成一个蒙板，没有被蒙板的区域会被隐藏。
eg：如果绘制一个图形，并进行裁切，则圆形之外的区域将不会绘制在canvas上。
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;} 10 canvas{background: #fff;} 11 </style> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 draw(); 15 }; 16 function draw(){ 17 var ctx = document.getElementById('myCanvas').getContext('2d'); 18 19 ctx.fillStyle = '#000'; 20 ctx.fillRect(0,0,300,300); 21 ctx.fill(); 22 //绘制圆形 23 ctx.beginPath(); 24 ctx.arc(150,150,130,0,Math.PI*2,true); 25 //裁切路径 26 ctx.clip(); 27 ctx.translate(200,20); 28 for( var i=0; i<90; i++){ 29 ctx.save(); 30 ctx.transform(0.95,0,0,0.95,30,30); 31 ctx.rotate(Math.PI/12); 32 ctx.beginPath(); 33 ctx.fillStyle = 'red'; 34 ctx.globalAlpha = '0.4'; 35 ctx.arc(0,0,50,0,Math.PI*2,true); 36 ctx.closePath(); 37 ctx.fill(); 38 } 39 40 } 41 </script> 42 </head> 43 <body> 44 <div id="div1"> 45 <canvas id="myCanvas" width="300" height="300"></canvas> 46 </div> 47 </body> 48 </html>
