會遇到一些情況在創作時會想要把作品分層，什麼意思呢?就是指說我們要開多張畫布，而畫布會像div dom元素一樣，都是結點，既然是節點就可以疊加，可以覆蓋，甚至可以指定父節點，例如我們在 html中設定

<div id="hi"></div>

就可以使用parent()來為畫布指定父節點

function setup(){
  let cxt = createCanvas(600, 600);
 cxt.parent('hi');
}

function draw(){

}

建立多張畫布

比較好的做法是 new 一個 p5的實例，就可以視為個別畫布，稱為實例模式（instance mode），可以參考這篇文章，而我自己常用的方式是直接建立多個Graphics，也就是全域模式（global mode）來進行繪圖，優點是方便，因為有時候第二章畫布沒有要進行很複雜的繪圖，缺點就是雜亂，把所有變數什麼的砸進一鍋粥，如果只是單獨要產一幅作品倒也還好，但要是這是要放進網站中的背景裝飾就不好管理了

總之，跟大家分享我的方法(請不要學(那幹嘛打))，但還是建議用實例產喔

範例實作

首先我們可以把需要的資源都拉進來

let pic1;
let pic2;

function preload(){

  fontBold = loadFont('Muli-Black.ttf');
  font = loadFont('Segoe-Bold.ttf');

  pic1 =  loadImage('2.jpg');
  pic2 = loadImage('4.jpg');
}

接下來在setup 中設定畫布，我們可以使用createGraphics()來新增畫布，下面程式中可以發現所有的函數都是指向createCanvas生出的畫布，如果希望針對第二張畫布操作函數，就要在函數錢前加上第二章畫布的變數名稱

//第二個canvas
let layer2 ;
//


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

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


  //圖片形狀位置設定
  rectMode(CENTER)
  imageMode(CENTER);
  
  //text字型字體設定
  textFont(font);
  textAlign(CENTER, CENTER);
  textSize(50);

  //第二層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);
}

另外要注意的是如果想要把後續新增的畫布加入原生畫布中，要用image()函數來置入

layer2.text('123123',100,100)
image(layer2, width/2, height/2) //要把第二章畫布寫進去

完整的程式法如下圖，可以看到我在第一章畫布中化了背景色和文字(Hi Tokyo)
第二章畫布中放了一張圖片

小結

建立多張畫布的方式很簡單，大家可以玩玩看喔~謝謝大家今天觀看