首页 > 代码库 > canvas图形的组合与裁切
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>
结果：
canvas图形的组合与裁切
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。