一、圖形組合方式
以下是圖片組合的一些方式，有兩個(gè)概念需要清楚，(目標(biāo)圖和源圖) 目標(biāo)圖：先添加的圖像；源圖：后添加的圖像；
8A66A93871BD7FCC1BF6213E1C4FB284.png
- 默認(rèn)值：source-over
// 圓
context.beginPath();
context.arc(100,100,100,0,Math.PI*2);
context.fillStyle = "red";
context.fill();
// 默認(rèn)：source-over
context.globalCompositeOperation = "source-over";
// 方塊
context.beginPath();
context.fillStyle = "blue";
context.fillRect(50,50,200,200);
默認(rèn)效果圖：
D660F5A13F4C74F8BD3D41ABE7BA6CE6.png
- source-atop:只顯示在目標(biāo)圖中源圖的部分
context.globalCompositeOperation = "source-over";
效果圖：
D3844B9519918797D027D407F12C0875.png
- destination-in:只顯示源圖中目標(biāo)函數(shù)的部分
context.globalCompositeOperation = "destination-in";
效果圖：
D23E1FB2C521B3732BF59F3BB814D2EA.png
這里就展示三個(gè)值做對(duì)應(yīng)的不同效果，其余的大家可以自己試試。
