第二種p5.js可以操做的遮罩方法是mask()，以防有這篇才看到，不清楚遮罩作用的朋友，下面有簡單示意圖描述遮罩作用，而不同於erase，他會保留原本被剪裁的畫布，假設我們拿了蘋果形狀的路徑，想要剪裁紅色的紙，在erase中最後只會留下一個紅色的蘋果，但在mask中，我們正常會得到紅色的蘋果和一張完整的紅色紙，原因是使用了get()來取得本體畫布，get()作用是從畫布中獲取全部區域或部分像素，因此我們獲得get()所複製出的第二張畫布，並且路徑針對這張畫步來作用。

剪裁流程是沿著沿著路徑去裁切，並保留原本的路徑內的圖案，我做了個小圖如下示意

程式範例

需要被剪地的部分以下統一稱為路徑，畫布上可以自由作畫，無論在同一個位置上放了幾個圖形文字，但一旦剪裁掉後，就會把整張畫布挖空，如下圖我製作了一個有圓角的路徑，路徑直接穿透矩形和畫布本身。

使用圖形路徑剪裁

剪裁圖形

使用圖形剪裁圖形，並且設定兩張畫步，其中一張當作路徑使用(layer2 )，用路徑剪裁本體畫布，下面附上程式碼與註解

let hues = [];

function setup() {
  createCanvas(windowWidth, windowHeight);

  layer2 = createGraphics(width,height);
  layer2.rectMode(CENTER);
  layer2.textSize(128);
  layer2.fill(255);
  layer2.textAlign(CENTER, CENTER);

  colorMode(HSB, 360, 100, 100, 100);
  rectMode(CENTER);
  background(135,10,90);
  for(let i=0; i<10; i++){
    hues.push(random(360));
  }
  
  push()
  stroke(135,10,90)
  strokeWeight(20) 
  translate(width/2,height/2);
  for(let i=0; i<75; i++) {
    fill(random(hues[0], hues[9]) , 79, 89);  //
    scale(.9); 
    rect(0,0,600,600);  
  }
  pop()

  noLoop()
	
}

function draw() { //完整示範
  //背景色
	fill('red')
  //畫背景
  rect(0,0, width, height);
  //背景end
  
  //本體取得目前畫布
	let img = get();

  //第二張畫布畫上想當成遮罩的形狀，也可以使用其他圖片
  layer2.rect(width / 2, height / 2, 200, 200, 20)
  //本體畫布套上第二張遮罩圖案，一經剪裁完成，本體畫布也會不見(被拿去剪了)
	img.mask(layer2);image.png

  //給本體其他顏色，才看的出來被裁切什麼
	background(color(240,20,90));
  //把被裁切的內容放回去
	image(img, 0, 0, width, height);
}

剪裁字形

使用圖形來剪裁字形，可以看到下面範例中文字被切割了

剪裁圖檔

使用圖形來剪裁圖檔，做一個簡單的婚禮小卡

使用文字路徑剪裁

使用文字路徑也可以裁切圖形、圖檔與文字本身

剪裁圖形

文字路徑裁切圖形，解析步驟如下

• 建立一組變色方框
• 使用文字路徑去剪裁變色的方框pattern(此時會只留下在路徑內的pattern)
• 把剩餘的pattern用單色背景蓋掉
• 在背景中置入照片

變色方框pattern	被文字剪過以後的樣式

剪裁字形

剪裁圖檔

使用圖檔路徑剪裁

mask()可以使用png來當作剪裁路徑，全系列文章示範圖檔僅供免費教學與自我學習使用參考。先在畫布上繪製圖形後，把png的檔案當作路徑才操作，就可以沿著圖檔圖案的路徑，來剪裁畫布了。使用圖檔可以剪裁圖形、文字、也可以用圖檔剪裁圖檔。

剪裁圖形

剪裁字形

剪裁圖檔

小結

前面有說到mask是取得本體畫布的方式，那get()是否也可以做用在erase中呢，目前我的測試是還不行，測試得出的脈絡原理可能是因為使用get()後得到的是"像素"，並不是canvas對象，所以我猜測作為像素也無法直接套用canvas的函數，因此才無法成功。

如果是希望可以使用erase，並也又有保留原本設計底圖的需求，也可以把get()後取得的像素置入layer2 第二張畫布中，來保留原本的設計，怎麼做，都有點麻煩呢...

這是原本按照mask寫邏輯的錯誤、無法使用的程式碼，作為示意圖，請不要用_(┐ ◟;ﾟдﾟ)ノ

總之遮罩的三種方法終於寫完第二篇了嗚嗚，謝謝大家今天收看

圖片來源
https://www.freeiconspng.com/images/nike-logo
https://www.wikidata.org/wiki/Q60