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

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

textAlign()

説明文

テキストを描画するための現在の配置を設定します。 horizAlign(LEFT、CENTER、RIGHT) および vertAlign(TOP、BOTTOM、CENTER、BASELINE)の2つの引数を受け入れます。

horizAlign パラメータは text() 関数のx値を参照し、vertAlign パラメータはy値を参照しています。

したがって、textAlign(LEFT) と記述する場合、テキストの左端を text() で指定したx値に揃えます。 textAlign(RIGHT, TOP)と書くとテキストの右端をx値に、テキストの上端をy値に揃えます。

構文

textAlign(horizAlign, [vertAlign])

textAlign()

パラメタ

• horizAlign
  定数：水平方向の配置。LEFT, CENTER または RIGHT

• vertAlign
  定数：垂直方向の配置。TOP, BOTTOM, CENTER または BASELINE(オプション)

例1

function setup(){
  textSize(16);
  strokeWeight(0.5);
  line(width/2, 0, width/2, height);
  
  // horizAlign = RIGHT のとき
  textAlign(RIGHT);
  text('ABCD', 50, 30);
  
  // horizAlign = CENTER のとき
  textAlign(CENTER);
  text('EFGH', 50, 50);
  
  // horizAlign = LEFT のとき
  textAlign(LEFT);
  text('IJKL', 50, 70);
}

実行結果

例2

function setup(){
  createCanvas(120, 120);
  
  textSize(16);
  strokeWeight(0.5);

  // vertAlign = TOP のとき
  line(0, 12, width, 12);
  textAlign(CENTER, TOP);
  text('TOP', 0, 12, width);

  // vertAlign = CENTER のとき
  line(0, 40, width, 40);
  textAlign(CENTER, CENTER);
  text('CENTER', 0, 40, width);

  // vertAlign = BASELINE のとき
  line(0, 68, width, 68);
  textAlign(CENTER, BASELINE);
  text('BASELINE', 0, 68, width);

  // vertAlign = BOTTOM のとき
  line(0, 110, width, 110);
  textAlign(CENTER, BOTTOM);
  text('BOTTOM', 0, 110, width);
}

実行結果

著作権

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