globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
参考文档： developer.mozilla.org/zh-CN/docs/…
一般情况下，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。 比如，对合成的图形来说，绘制顺序会有限制。
不过，我们可以利用 globalCompositeOperation 属性来改变这种状况。 此外, clip属性允许我们隐藏不想看到的部分图形。
globalCompositeOperation （图像组合）
我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect()方法做的那样）以及更多其他操作。
这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。
var gco=new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");
for (n=0;n<gco.length;n++) {
document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
var c=document.createElement("canvas");
c.width=120;
c.height=100;
document.getElementById("p_" + n).appendChild(c);
var ctx=c.getContext("2d");
ctx.fillStyle="dodgerblue";
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation = gco[n];
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
document.write("</div>");
}
// 蓝色是目标图像（先绘制）
// 红色是源图像（后绘制）
显示结果如下：
使用场景总结：
- destination-out： 使用该类型，可以绘制出透明的效果。常用的如刮刮乐等效果……
- lighter：可以通过该类型，绘制出颜色更亮的图像
通过图像组合达到不同的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var WIDTH = 400;
var HEIGHT = 400;
var canvas =document.getElementById("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'dodgerblue';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fillRect(0, 0, WIDTH/2, HEIGHT/2);
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = 'green';
ctx.arc(150,150,50,0,2*Math.PI);
ctx.arc(300,300,50,0,2*Math.PI);
ctx.fill();
// globalCompositeOperation 设置前的图像是目标图像，设置后绘制的是源图像
</script>
</body>
</html>
显示结果：
三种图形的color分别是：dodgerblue， rgba(0,0,0,0.5)，green。
