一、图形组合方式
以下是图片组合的一些方式，有两个概念需要清楚，(目标图和源图) 目标图：先添加的图像；源图：后添加的图像；
8A66A93871BD7FCC1BF6213E1C4FB284.png
- 默认值：source-over
// 圆
context.beginPath();
context.arc(100,100,100,0,Math.PI*2);
context.fillStyle = "red";
context.fill();
// 默认：source-over
context.globalCompositeOperation = "source-over";
// 方块
context.beginPath();
context.fillStyle = "blue";
context.fillRect(50,50,200,200);
默认效果图：
D660F5A13F4C74F8BD3D41ABE7BA6CE6.png
- source-atop:只显示在目标图中源图的部分
context.globalCompositeOperation = "source-over";
效果图：
D3844B9519918797D027D407F12C0875.png
- destination-in:只显示源图中目标函数的部分
context.globalCompositeOperation = "destination-in";
效果图：
D23E1FB2C521B3732BF59F3BB814D2EA.png
这里就展示三个值做对应的不同效果，其余的大家可以自己试试。
