## 合成與裁剪
在我們繪制圖形時，不同的圖形會因為繪制的先后而有了層級關系。如果新繪制的圖形和原有內容有重疊部分，在默認情況下，新繪制的圖形是會覆蓋在原有內容之上。
在HTML中，我們會添加z-index來修改層級關系，那么，在canvas里，我們如何修改呢？
我們可以利用 `globalCompositeOperation` 屬性來改變。
```
globalCompositeOperation
```
它共有12個可選值：
| 屬性值 | 描述 |
| :---: | :---: |
| source-over | （默認值） 新圖形會覆蓋在原有內容之上 |
| source-in | 新圖形僅僅會出現與原有內容重疊的部分，其他區域都變成透明的。 |
| source-out | 只有新圖形中與原有內容不重疊的部分會被繪制出來 |
| source-atop | 新圖形中與原有內容重疊部分會被繪制，并覆蓋于原有內容之上。 |
| lighter | 兩圖形中重疊部分作加色處理 |
| xor | 重疊部分會變成透明 |
| destination-over | 會在原有內容之上繪制新圖形 |
| destination-in | 原有內容與新圖形重疊的部分會被保留，其他部分變成透明的 |
| destination-out | 原有內容中與新圖形不重疊的部分會被保留 |
| destination-atop | 原有內容中與新圖形重疊部分會被保留，并會在原有內容之上繪制新圖形 |
| darker | 兩圖形重疊部分作減色處理 |
| copy | 只有新圖形會被保留，其他都被清除掉 |
**裁切路徑**
裁切路徑和普通的 canvas 圖形差不多，不同的是它的作用是遮罩，用來隱藏沒有遮罩的部分。
如果和上面介紹的 `globalCompositeOperation` 屬性作一比較，它可以實現與 source-in 和 source-atop 差不多的效果。最重要的區別是裁切路徑不會在 canvas 上繪制東西，而且它永遠不受新圖形的影響。
我們用 `clip()` 方法來創建一個新的裁切路徑。默認情況下，canvas 有一個與它自身一樣大的裁切路徑（也就是沒有裁切效果）。
例子：
在這里，用` clip()` 方法創建一個圓形的裁切路徑，裁切路徑創建之后所有出現在它里面的東西才會畫出來。
```
var img=new Image();
img.src="canvas_girl.jpg";
img.onload=function(){
cxt.beginPath();
cxt.arc(120,100,50,0,Math.PI*2,true);
cxt.clip();
cxt.drawImage(img,10,10);
}
```
