HTML5学习笔记-绘制变形图形之组合效果

绘制组合效果的图形

将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用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>