photoshop或者AI常用到的遮罩，或稱為裁切效果，在p5.js裡面也可以做到，一共有三種方式可以製作遮罩，今天會介紹第一種，p5.js提供的erase() 和 noErase()。

介紹

首先以防有人還不知道遮罩是什麼的話我們來看看下面的網路範例圖，使用了菱形去剪裁熱氣球的照片，並且把裁切過後的結果保留下來，就跟css 當中的clip-path類似

剪裁流程如下方式沿著路徑去裁切，codrops上提供了非常好的範例流程，我做了個小圖如下示意

程式範例

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

使用圖形路徑剪裁

剪裁圖形

function setup(){
  //第一層layer設定
  createCanvas(960, 640);
  colorMode(HSB, 360, 100, 100, 100);
  noLoop()

  //基本線段填色設定
  stroke(70,50,85);
  strokeWeight(5);
  fill(70,50,85);

}


function draw(){ //示範1
  background(3,48,93)
  fill('yellow')
  rect(100,100,600,600)

  erase()
  rect(width/2,height/2,300,300,30)

  noErase()
}

剪裁字形

使用來剪裁字形同樣可以正常運行，同理也會挖空整張畫布

剪裁圖檔

使用文字路徑剪裁

使用文字路徑也可以套用 erase() 與 noErase() 裁切圖形

接下來合併使用文字路徑去剪裁幾何圖形、圖檔、與文字

使用圖檔路徑剪裁

另外兩個遮罩都可以使用png來當作剪裁路徑，但不知道為什麼erase不行，如果希望用png作為路徑的話可以參考看看Day 24, Day25的方法。

小結

其實只要記住他的原理就是，第一層畫布只要一被erase挖空，畫布上畫了幾層都會被挖掉，就像一張畫布上畫了水彩，油畫顏料，貼了貼紙，噴漆，貼金箔，但只要剪刀一剪，會一整塊所有填色被挖掉，所以如果不喜歡剪光就沒有底圖的穿透效果的話，可以設定兩個畫布(Day 15有建立多個畫布的教學)，可以設建立兩層畫布，把背景畫要畫在第一層畫布，其餘內容要畫在第二層畫布(打算被剪掉)，這樣就可以製作出透感的效果。像下圖這樣

function preload(){
  fontBold = loadFont('index19/MyriadPro-Bold.otf');
  font = loadFont('index18/MyriadPro-Semibold.ttf');
  test = loadImage('index20/3.jpg');
}

function setup(){
  //第一層layer設定
  createCanvas(960, 640);
  noLoop()

  //基本線段填色設定
  stroke(70,50,85);
  strokeWeight(5);
  fill(70,50,85);


  //圖片形狀位置設定
  rectMode(CENTER)
  imageMode(CENTER);
  // pixelDensity(2);//High reso, slows frame rate
  
  //text字型字體設定
  textFont(font);
  textAlign(CENTER, CENTER);
  textSize(128);

  //第二層layer設定
  layer2 = createGraphics(600, 400)
  layer2.colorMode(HSB, 360, 100, 100, 100);
  layer2.rectMode(CENTER)
  layer2.textFont(font);
  layer2.textAlign(CENTER, CENTER);
  layer2.textSize(80);
  layer2.fill(70,50,85);
}


function draw(){
  background(187,212,206)
  drawingContext.filter = 'drop-shadow(16px 16px 20px rgba(0,0,0,0.5))'
  image(test, width/2,height/2);

  layer2.background(100,20,90,60)
  layer2.textFont(fontBold);
  
  layer2.fill(180,80,80,40)
  
  layer2.erase() 
  layer2.text('Hi Cerise',layer2.width/2+100,layer2.height/2-130)
  layer2.text('Have a nice day',layer2.width/2,layer2.height/2)
  layer2.noErase()
  
  image(layer2, width/2, height/2)
}