P5.js 日本語リファレンス(rect)

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

rect()

説明文

画面に長方形を描画します。長方形はすべての角度が90度の4辺の形状です。デフォルトでは最初の2つのパラメータは左上隅の位置を設定し3番目のパラメータは幅を設定し4番目のパラメータは高さを設定します。ただし、これらのパラメータの解釈方法は rectMode() で変更できます。

5番目、6番目、7番目、8番目のパラメータが指定されている場合、それぞれ左上隅、右上隅、右下隅、左下隅の隅の半径を決定します。半径を省略した場合、以前に指定した半径値の値に設定されます。

構文

rect(x, y, w, [h​​], [tl], [tr], [br], [bl])

rect(x, y, w, h, [detailX], [detailY])

パラメタ

• x
  Number：長方形のx座標

• y
  Number：長方形のy座標

• w
  Number：長方形の幅

• h
  Number：長方形の高さ (オプション)

• tl
  Number：左上隅のオプションの半径 (オプション)

• tr
  Number：右上隅のオプションの半径 (オプション)

• br
  Number：右下隅のオプションの半径 (オプション)

• bl
  Number：左下隅のオプションの半径 (オプション)

• detailX
  Number：x方向のセグメント数(WebGLモードの場合)(オプション)

• detailY
  Number：y方向のセグメント数(WebGLモードの場合)(オプション)

例1

function setup() {
  createCanvas(400, 400);

  stroke("red");

  //左上点(30, 20)に幅55と高さ80の長方形を描画します。
  rect(30, 20, 55, 80);


  stroke("blue");

  //角が丸く, 半径が15の長方形を描画します。
  rect(110, 20, 55, 55, 15);

  stroke("green");

  //以下の半径の角が丸い長方形を描画します：
  //左上= 20, 右上= 15, 右下= 10, 左下= 5。
  rect(190, 20, 55, 55, 20, 15, 10, 5);

}

実行結果

著作権

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) に従います。