元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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座標の確認用
}
f:id:shiroyuki2020:20210422185059p:plain

テキストのその他の設定

  • 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);
}
f:id:shiroyuki2020:20210422185102p:plain

まとめ

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

参考サイト