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

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の line関数を説明します。

line()

説明文

画面に線(2点間の直接パス)を描画します。 4つのパラメータを持つline() は 2D で、6つのパラメータを持つline() は 3D で線を描画します。線に色を付けるには stroke() を使用します。線を塗りつぶすことはできないため fill() は線の色に影響を与えません。 2D の line はデフォルトで1ピクセルの幅で描画されますが、これは strokeWeight() で変更できます。

構文

line(x1, y1, x2, y2)

line(x1, y1, z1, x2, y2, z2)

パラメタ

• x1
  Number：最初の点のx座標

• y1
  Number：最初の点のy座標

• x2
  Number：2番目の点のx座標

• y2
  Number：2番目の点のy座標

• z1
  Number：最初の点のZ座標

• z2
  Number：2番目の点のZ座標

例1

function setup() {
  createCanvas(400, 400);
  
  // 始点(30, 20) から 終点(85, 75)にラインを描画
  line(30, 20, 85, 75);

  // 色を赤色にする
  stroke("#FF0000");
  // 線幅を3にする
  strokeWeight(3)
  
  line(85, 20, 85, 75);
}

実行結果

著作権

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