組合與剪切
組合與剪切主要是對(duì)應(yīng)多個(gè)圖形來(lái)說(shuō)的，組合指的是多個(gè)圖形重疊時(shí)的組合方式，剪切是指使用路徑來(lái)指定繪圖的區(qū)域，類似于Photoshop中的蒙版的效果。
組合
圖形的組合是通過(guò)globalCompositeOperation屬性來(lái)操作的，該屬性可以取下面的值：
- source-over: 后繪制的圖形覆蓋原圖，該值為默認(rèn)值
- source-in: 保留后繪制圖形和原圖形重疊的部分，使用后繪制圖形的樣式，其他區(qū)域透明，也就是保留相交的部分
- source-out: 保留后繪制圖形不和原圖形重疊的部分，其他區(qū)域透明
- source-atop: 保留后繪制圖形和原圖形重疊的部分，使用后繪制圖形的樣式，原圖中的非重疊部分不變
- destination-over: 后繪制圖形被原圖覆蓋，也就是重疊部分顯示原圖
- destination-in: 保留后繪制圖形和原圖形重疊的部分，使用原圖的樣式，其他區(qū)域透明
- destination-out: 保留原圖不和后繪制圖形重疊的部分，其他區(qū)域透明
- destination-atop: 保留后繪制圖形和原圖形重疊的部分，使用原圖的樣式，后繪制圖形中的非重疊部分不變
- lighter: 后繪制圖形和原圖重疊的部分進(jìn)行疊加
- copy: 顯示后繪制圖形，不顯示原圖
- xor: 后繪制圖形和原圖重疊的部分進(jìn)行異或操作
- multiply: 將后繪制圖形和原圖的像素相乘，圖形變暗
- screen: 將后繪制圖形和原圖的像素分別反向后相乘再反向，圖形變亮
- overlay: 組合使用multiply和screen,使亮的部分更亮，暗的部分更暗
- darken: 取兩個(gè)圖形中較暗的像素值，例如，#aa0011與#cc3300計(jì)算后為#aa0000
- ighten: 取兩個(gè)圖形中較亮的像素值，例如，#aa0011與#cc3300計(jì)算后為#aa3311
- color-dodge: 使用原圖像素除以后繪制圖形的反向像素值
- color-burn: 使用原圖反向像素除以后繪制圖形的像素，然后再反向
- hard-light: 組合使用multiply和screen，它與overlay的區(qū)別是將原圖和后繪制圖形進(jìn)行交換
- soft-light: 類似于hard-light，但比hard-light柔和
- difference: 使用后繪制圖形的像素值減去原圖的像素值
- exclusion: difference操作后降低對(duì)比度
- hue: 使用后繪制圖形的色調(diào)和原圖的亮度、色度
- saturation: 使用后繪制圖形的色度和原圖的亮度、色調(diào)
- color: 使用后繪制圖形的色度、色調(diào)和原圖的亮度
- luminosity：使用后繪制圖形的亮度和原圖的色度、色調(diào)
示例：
<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>
剪切
剪切的作用其實(shí)是指定新的繪圖區(qū)域，如果將圖像繪制到剪切區(qū)域外面就顯示不出來(lái)了，但是剪切操作不會(huì)影響剪切之前的圖形。剪切使用的是clip方法，如下：
- clip([fillRule="nonzero"])
- clip(path[,fillRule="nonzero"])
fillRule:用來(lái)指定用你什么算法來(lái)判斷一個(gè)點(diǎn)是否在被剪切的區(qū)域內(nèi)，可取“nonzero”或“evenodd”
當(dāng)路徑是使用beginPath創(chuàng)建時(shí)，使用第一種方式直接調(diào)用clip，當(dāng)路徑是使用Path2D創(chuàng)建時(shí)，需要使用第二種方式將創(chuàng)建的路徑作為參數(shù)傳入。
示例：
<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>
首先畫一個(gè)以（110,15）為左上頂點(diǎn)，寬為30、高為45的矩形，接著剪切了一個(gè)（60，60）為圓形、45為半徑的圓，然后又畫了一個(gè)以（0，0）為左上角，寬和高都是60的矩形。這時(shí)第一個(gè)矩形可以正常顯示，但是第二個(gè)矩形只有剪切區(qū)域中的部分（也就是和剪切區(qū)域相交的部分）才可以顯示出來(lái)。
坐標(biāo)檢測(cè)
坐標(biāo)檢測(cè)就是檢測(cè)指定的點(diǎn)是否在所畫的路徑中，可以用于動(dòng)畫和游戲的碰撞檢測(cè)中。坐標(biāo)檢測(cè)使用的是isPointInPath方法，方法如下：
- isPointInPath(x,y[,fillRule="nonzero"])
- isPointInPath(path,x,y[,fillRule="nonzero"])
參數(shù)中，fillRule也用于指定算法，一般不需要修改；x和y為要檢測(cè)點(diǎn)的坐標(biāo)；path為使用Path2D新建出來(lái)的路徑，如果是beginPath新建的路徑，就可以直接調(diào)用。
示例：
<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>
如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “點(diǎn)贊” “評(píng)論” “收藏” 一鍵三連哦！
聽(tīng)說(shuō) ?? 點(diǎn)贊 ?? 的人運(yùn)氣不會(huì)太差，每一天都會(huì)元?dú)鉂M滿哦 嘿嘿!!! ?? ?? ??
大家的支持就是我堅(jiān)持下去的動(dòng)力。點(diǎn)贊后不要忘了?? 關(guān)注 ??我哦！
