在学习Canvas组合图形时看描述有些云里雾里，于是记录下实际效果来方便查看：
#canvas示例代码
<canvas id="canvas" width="400" height="300"></canvas>
#js示例代码
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d');
var oprtns = new Array(
"source-atop",
"source-in",
"source-out",
"source-over",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"lighter",
"copy",
"xor"
);
i = 8;
context.fillStyle = "blue";
context.fillRect(10,10,60,60);
context.globalCompositeOperation = oprtns[0];#替换此处数字来查看效果
context.beginPath();
context.fillStyle = "red";
context.arc(60,60,30,0,Math.PI*2,false);
context.fill();
}
