【p5.js】テキストの描画

テキストの描画について書きます。いくつか設定できるものがあります。テキストは、fill()とstroke()で文字の色と境界線の色を指定できます。それぞれの設定の詳細については、p5.jsのリファレンスで確認してください。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

text()

テキストを描画する。テキストの左下がxy座標になる。

• text(s, x, y, w, h):文字列、xy座標、幅、高さ
• 幅と高さを省略すると文字列の幅と高さになる

function setup(){
  createCanvas(200, 200);
  background(127);

  text("Hello p5.js", 100, 100);

  ellipse(100, 100, 10, 10);  //テキストのxy座標の確認用
}

テキストのその他の設定

• textAlign():テキストのxy座標の位置を指定→textAlign(水平方向, 垂直方向)
• textSize():テキストのサイズ
• textFont():フォント指定
• textStyle():テキストのスタイル
• fill():文字の塗りの指定
• stroke():文字の線の色の指定

function setup(){
  createCanvas(200, 200);
  background(127);

  textAlign(LEFT, TOP);
  textSize(20);
  //textFont('Impact');
  textStyle(BOLD);

  //文字色
  fill('orange');
  strokeWeight(5);
  //境界線の色
  stroke('red');
  text("Hello p5.js", 100, 100);

  ellipse(100, 100, 10, 10);
}

まとめ

• text():テキストの描画
• textAlign():テキストのxy座標の位置を指定
• textSize():テキストのサイズ
• textFont():フォント指定
• textStyle():テキストのスタイル
• fill():文字の塗りの指定
• stroke():文字の線の色の指定

参考サイト

• p5.jsのリファレンス:https://p5js.org/reference/