基本関数に戻る    印刷する

タイポグラフィ

文字(テキスト)を画面ウィンドウに表示するには、text()関数を使います。デフォルト以外のフォントを使用する場合はフォントデータオブジェクト(p5.Font)を作り、textFont()関数で指定します。

フォントデータファイルの設定

OpenType Font(otf形式)のファイルを、p5js用のフォントデータに変換します。ファイルはスケッチを実行するhtmlファイルからの相対パスで指定します。 loadFont()関数の引数に、フォント名を文字列で指定します。 次のようにpreload()関数の中でloadFont()を実行すると、フォントのロードが終了してからsetup()が実行されます。 
【例】let myFont;
     function preload() {
       myFont = loadFont("fontdata.otf"); //使用するフォントの読み込み
     }
     function setup() {
       textFont(myFont);  //使用するフォントの設定
       textSize(36);      //文字サイズの指定
       text("書きたい文字", 10, 50);
     }

文字の表示

text()関数で文字を表示できます。 
 text("表示する文字列", x座標, y座標) 【例】 text("文字文字", 20, 140);
 text('表示する文字列' x座標, y座標)  【例】 text('a', 20, 120);
 text(数字, x座標, y座標)           【例】 text(10, 20, 100);
 text(変数名, x座標, y座標)          【例】 text(mouseX, 20, 100);
x座標とy座標の値は、デフォルトでは、文字列左下角の位置を表します。 これはtextAlign()関数を使って変更できます。 
 textAlign(alignX) 
 textAlign(alignX, alignY)
alignXは、水平方向の位置の指定で、LEFT, CENTER, RIGHTのいずれか
alignYは、垂直方向の位置の指定で、TOP, BOTTOM, CENTER, BASELINEのいずれか

また、文字の描画色はfill()関数で変更します。

次の例は、マウスの位置に描いた円の、中央の座標を表示しています。表示する文字列はマウスの位置によって、動的に変化します。

マウスに付いて回転 
【リスト 文字の表示】
function setup() {
  createCanvas(200, 200);
  textSize(20);
  fill(200, 0, 0);
}
function draw() {
   background(0);
   ellipse(mouseX, mouseY, 15, 15);
   text("(" + mouseX + "," + mouseY + ")", mouseX+10, mouseY+5); 
}

copyright © info