p5.js erase()用法及代碼示例

p5.js中的erase()函數用於減去使用該函數後將要繪製的所有圖形。減去的繪圖區域將顯示畫布下方的網頁。可以通過使用noErase()函數來取消此函數的效果。

它不影響由image()和background()函數完成的圖形。

用法:

erase( [strengthFill], [strengthStroke] )

參數：該函數接受上麵提到的和下麵描述的兩個參數。

strengthFill:它是介於0到255之間的數字，表示擦除形狀填充的強度。它是一個可選值。默認值為255，表示形狀填充的全部強度。
strengthStroke:它是一個介於0到255之間的數字，表示擦除形狀的筆觸強度。它是一個可選值。默認值為255，表示形狀筆觸的全部強度。

以下示例說明了p5.js中的erase()函數：

範例1：

function setup() { 
  createCanvas(600, 400); 
  textSize(20); 
  
  fill('black'); 
  text("Move the slider below to change fill strength", 20, 30); 
  
  fillStrengthSlider = createSlider(0, 255, 128, 1); 
  fillStrengthSlider.position(30, 50); 
  
  text("Move the slider below to change stroke strength", 20, 100); 
  
  strokeStrengthSlider = createSlider(0, 255, 128, 1); 
  strokeStrengthSlider.position(30, 120); 
} 
  
function draw() { 
  fill('red'); 
  rect(50, 200, 200, 200); 
  
  erase(fillStrengthSlider.value(), strokeStrengthSlider.value()); 
  circle(100, 300, 200); 
  noErase(); 
  
}

輸出：
slider-erase

範例2：

let eraseEnable = false; 
  
function setup() { 
  createCanvas(600, 400); 
  textSize(20); 
  
  fill('black'); 
  text("Click the button to see the effects of"
         + " the erase() function", 20, 30); 
  
  toggleBtn = createButton("Toggle erase"); 
  toggleBtn.position(30, 60); 
  toggleBtn.mouseClicked(toggleErase); 
} 
  
function toggleErase() { 
  if (eraseEnable) { 
    noErase(); 
    eraseEnable = false; 
  } 
  else { 
    erase(); 
    eraseEnable = true; 
  } 
} 
  
function mouseMoved() { 
  fill('red'); 
  noStroke(); 
  circle(mouseX, mouseY, 50); 
}

輸出：
draw-toggle-erase

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5/erase

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | erase() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。