P5.js 日本語リファレンス(erase) #JavaScript

このページでは「P5.js 日本語リファレンス」の erase関数を説明します。

erase()

説明文

erase() に続くすべての描画はキャンバスから差し引かれます。差し引かれた領域はキャンバスの下のWebページを表示します。erase() は noErase() でキャンセルできます。

image() および background() で行われた描画は erase() の影響を受けません。

構文

erase([strengthFill], [strengthStroke])

パラメタ

strengthFill

Number：図形の塗りつぶしの消去の強さを表す数値(0〜255)。引数が指定されていない場合、デフォルト 255 になり完全な強度になります。(オプション)
strengthStroke

Number：図形のストロークの消去の強さを表す数値(0〜255)。引数が指定されていない場合、デフォルト 255 になり完全な強度になります。(オプション)

例1

function draw() {
  background(100,100,250); // 背景を青色に設定
  fill(0, 255, 100); // 塗りつぶし色を緑色に設定
  rect(20,20,60,60);
  erase() ;  // 差し引き(くり抜き)を設定
  ellipse(25,30,30); // 円で差し引き
  noErase() ;
}

実行結果

例2

function setup() {
  createCanvas(100,100,WEBGL);
}

function draw() {
  background(250, 250, 150); // 背景を青色に設定
  fill(15, 195, 185);// 塗りつぶし色を緑色に設定
  noStroke() ;
  sphere(30);
  erase() ; // 差し引き(くり抜き)を設定
  rotateY(frameCount * 0.02); // Y軸を中心に回転
  translate(0, 0, 40);
  torus(15,5); // トーラス(ドーナッツ形状)で差し引き
  noErase() ;
}

### 実行結果
https://editor.p5js.org/bit0101/sketches/6P_GXx8gG

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。