将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制了多条凡尔赛曲线，组合成了一个图形。利用globalCompositeOperation属性在已有图形后面再画新图形，还可遮盖、清除（比clear方法强劲的多）某些区域。语法格式：globalCompositeOperation=type;type属性值source-over 默认设置，新图形覆盖在原图形上。destination-over 在原有内容之下绘制新图形source-in 新图形仅出现在与原图形重叠的部分，其他区域部分变透明destination-in 原有内容中与新图形重叠的部分将会被保留，其他区域变透明source-out 新图形与原有图形不重叠的部分会被绘制出来destination-out 原有内容中与新图形不重叠的部分将会被保留source-atop 新图形与原有图形重叠的部分会被绘制出来，并覆盖于原有内容之上destination-atop 原有内容中与新图形重叠的部分将会被保留，并会在原有图形之下绘制新图形lighter 两图形中重叠部分做加色处理darker 重叠部分做减色处理xor 重叠部分变透明
copy 只有新图形会被保留，其他的都被清理掉
1 2 <canvas id="canvas4" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas4'); 8 var context=c.getContext("2d"); 9 10 var opt=new Array("source-over","destination-over","source-in","destination-in","source-out","destination-out","source-atop","destination-atop","lighter","darker","xor","copy","and");//数组存储type属性 11 var i=1;//让i从0到12变化，查看每个属性值的效果 12 context.fillStyle="blue"; 13 context.fillRect(10,10,60,60); 14 context.globalCompositeOperation=opt[i]; 15 context.beginPath(); 16 context.fillStyle="rgba(255,0,0,0.25)"; 17 context.arc(60,60,30,0,Math.PI*2,false); 18 context.fill(); 19 context.closePath(); 20 21 </script>
效果如下：
部分图形效果并没有清晰达到属性描述的效果，可能是我设置的颜色问题。
1 <canvas id="canvas5" width="400" height="300" style="border:1px solid blue;"> 2 Your browser does not support the canvas element. 3 </canvas> 4 5 <script type="text/javascript"> 6 var c=document.getElementById('canvas5'); 7 var context=c.getContext("2d"); 8 var opt=new Array("source-over","destination-over","source-in","destination-in","source-out","destination-out","source-atop","destination-atop","lighter","darker","xor","copy","and"); 9 var i=0;//0到12变化 10 //绘制两个矩形 11 context.fillStyle="blue"; 12 context.fillRect(10,10,60,60); 13 context.globalCompositeOperation=opt[i]; 14 context.fillStyle="red"; 15 context.fillRect(35,35,60,60); 16 </script>效果如下：
转载于:https://www.cnblogs.com/yunxiang-2013/p/5669939.html
