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

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

textDescent()

説明文

現在のフォントの現在のサイズでディセントを返します。ディセントとはベースラインより下のディセンダーが最も長い文字のピクセル単位の距離を表します。

構文

textDescent()

戻り値

Number：ディセンダー(ピクセル単位)

例1

function setup() {
  createCanvas(200, 200);
  
  let base = 100;

  // ディセントに乗ずる係数(フォントごとに異なります)
  let scalar = 0.6;

  textSize(32);
  
  // ディセントを算出します
  let desc = textDescent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(0, base, 50, base);

  // 文字のボトムにラインを描画します
  stroke(0, 0, 255);
  line(0, base + desc, 50, base + desc);

  // ベースラインにテキストを描画します
  text('dp', 0, base);
  
  textSize(64);

  // ディセントを算出します
  desc = textDescent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(60, base, 140, base);

  // 文字のボトムにラインを描画します
  stroke(0, 0, 255);
  line(60, base + desc, 140, base + desc);

  // ベースラインにテキストを描画します
  text('dp', 60, base);
}

実行結果

著作権

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