Die Funktion erase() in p5.js wird verwendet, um alle Zeichnungen zu subtrahieren, die nach der Verwendung dieser Funktion ausgeführt würden. Der subtrahierte Zeichenbereich würde die Webseite unter der Leinwand zeigen. Die Wirkung dieser Funktion kann mit der Funktion noErase() aufgehoben werden.

Es wirkt sich nicht auf die Zeichnungen aus, die von den Funktionen image() und background() ausgeführt werden.

Syntax:

erase( [strengthFill], [strengthStroke] )

Parameter: Diese Funktion akzeptiert zwei Parameter, wie oben erwähnt und unten beschrieben.

  • StärkeFüllung: Dies ist eine Zahl im Bereich von 0 bis 255, die die Füllstärke der Löschform angibt. Es ist ein optionaler Wert. Der Standardwert ist 255, was die volle Füllstärke der Form angibt.
  • StärkeStrich: Dies ist eine Zahl im Bereich von 0 bis 255, die die Stärke des Strichs der Löschform angibt. Es ist ein optionaler Wert. Der Standardwert ist 255, was die volle Stärke des Strichs der Form angibt.

Die folgenden Beispiele veranschaulichen die erase()-Funktion in p5.js:

Beispiel 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();
  
}

Ausgabe:
Schieberegler löschen

Beispiel 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);
}

Ausgabe:
Zeichnen-Umschalten-Löschen

Umgebungs-Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Referenz: https://p5js.org/reference/#/p5/erase