組合與剪切
組合與剪切主要是對應多個圖形來說的，組合指的是多個圖形重疊時的組合方式，剪切是指使用路徑來指定繪圖的區域，類似於Photoshop中的蒙版的效果。
組合
圖形的組合是通過globalCompositeOperation屬性來操作的，該屬性可以取下面的值：
- source-over: 後繪製的圖形覆蓋原圖，該值爲默認值
- source-in: 保留後繪製圖形和原圖形重疊的部分，使用後繪製圖形的樣式，其他區域透明，也就是保留相交的部分
- source-out: 保留後繪製圖形不和原圖形重疊的部分，其他區域透明
- source-atop: 保留後繪製圖形和原圖形重疊的部分，使用後繪製圖形的樣式，原圖中的非重疊部分不變
- destination-over: 後繪製圖形被原圖覆蓋，也就是重疊部分顯示原圖
- destination-in: 保留後繪製圖形和原圖形重疊的部分，使用原圖的樣式，其他區域透明
- destination-out: 保留原圖不和後繪製圖形重疊的部分，其他區域透明
- destination-atop: 保留後繪製圖形和原圖形重疊的部分，使用原圖的樣式，後繪製圖形中的非重疊部分不變
- lighter: 後繪製圖形和原圖重疊的部分進行疊加
- copy: 顯示後繪製圖形，不顯示原圖
- xor: 後繪製圖形和原圖重疊的部分進行異或操作
- multiply: 將後繪製圖形和原圖的像素相乘，圖形變暗
- screen: 將後繪製圖形和原圖的像素分別反向後相乘再反向，圖形變亮
- overlay: 組合使用multiply和screen,使亮的部分更亮，暗的部分更暗
- darken: 取兩個圖形中較暗的像素值，例如，#aa0011與#cc3300計算後爲#aa0000
- ighten: 取兩個圖形中較亮的像素值，例如，#aa0011與#cc3300計算後爲#aa3311
- color-dodge: 使用原圖像素除以後繪製圖形的反向像素值
- color-burn: 使用原圖反向像素除以後繪製圖形的像素，然後再反向
- hard-light: 組合使用multiply和screen，它與overlay的區別是將原圖和後繪製圖形進行交換
- soft-light: 類似於hard-light，但比hard-light柔和
- difference: 使用後繪製圖形的像素值減去原圖的像素值
- exclusion: difference操作後降低對比度
- hue: 使用後繪製圖形的色調和原圖的亮度、色度
- saturation: 使用後繪製圖形的色度和原圖的亮度、色調
- color: 使用後繪製圖形的色度、色調和原圖的亮度
- luminosity：使用後繪製圖形的亮度和原圖的色度、色調
示例：
<body>
<canvas id='c2d'>瀏覽器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(30,60,60,40);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'blue';
ctx.fillRect(70,40,60,40);
}
</script>
</body>
剪切
剪切的作用其實是指定新的繪圖區域，如果將圖像繪製到剪切區域外面就顯示不出來了，但是剪切操作不會影響剪切之前的圖形。剪切使用的是clip方法，如下：
- clip([fillRule="nonzero"])
- clip(path[,fillRule="nonzero"])
fillRule:用來指定用你什麼算法來判斷一個點是否在被剪切的區域內，可取“nonzero”或“evenodd”
當路徑是使用beginPath創建時，使用第一種方式直接調用clip，當路徑是使用Path2D創建時，需要使用第二種方式將創建的路徑作爲參數傳入。
示例：
<body>
<canvas id='c2d'>瀏覽器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillRect(110,15,30,45);
ctx.beginPath();
ctx.arc(60,60,45,0,2*Math.PI);
ctx.stroke();
ctx.clip();
ctx.fillRect(0,0,60,60);
}
</script>
</body>
首先畫一個以（110,15）爲左上頂點，寬爲30、高爲45的矩形，接着剪切了一個（60，60）爲圓形、45爲半徑的圓，然後又畫了一個以（0，0）爲左上角，寬和高都是60的矩形。這時第一個矩形可以正常顯示，但是第二個矩形只有剪切區域中的部分（也就是和剪切區域相交的部分）纔可以顯示出來。
座標檢測
座標檢測就是檢測指定的點是否在所畫的路徑中，可以用於動畫和遊戲的碰撞檢測中。座標檢測使用的是isPointInPath方法，方法如下：
- isPointInPath(x,y[,fillRule="nonzero"])
- isPointInPath(path,x,y[,fillRule="nonzero"])
參數中，fillRule也用於指定算法，一般不需要修改；x和y爲要檢測點的座標；path爲使用Path2D新建出來的路徑，如果是beginPath新建的路徑，就可以直接調用。
示例：
<body>
<canvas id='c2d'>瀏覽器不支持canvas</canvas>
<div></div>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
const newPath = new Path2D();
newPath.rect(30,30,40,60);
const div = document.querySelector('div');
const spanValue = `<span>30,40 is in Path: ${ctx.isPointInPath(newPath,30,40)}</span>`;
const spanValue1 = `<span>20,40 is in Path: ${ctx.isPointInPath(newPath,20,40)}</span>`;
div.innerHTML = spanValue + '<br>' + spanValue1;
}
</script>
</body>
如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
聽說 👉 點贊 👈 的人運氣不會太差，每一天都會元氣滿滿哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我堅持下去的動力。點贊後不要忘了👉 關注 👈我哦！