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

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

loadFont()

ファイルまたはURLからOpenTypeフォントファイル(.otf, .ttf)を読み込み、PFontオブジェクトを返します。このメソッドは非同期です。つまり、スケッチの次の行が実行される前に終了しない場合があります。

フォントへのパスは、スケッチでリンクするHTMLファイルからの相対パスである必要があります。ブラウザの組み込みセキュリティにより、URLまたはその他のリモートの場所からのフォントの読み込みがブロックされる場合があります。

preload() 内でloadFont() を呼び出すと、setup() および draw() が呼び出される前にロード操作が完了することが保証されます。

構文

loadFont(path, [callback], [onError])

パラメタ

• path
  String：ロードするファイルまたはURLの名前

• callback
  Function：loadFont() の完了後に実行される関数(オプション)

• onError
  Function：エラーが発生した場合に実行される関数(オプション)

戻り値

p5.Font：p5.Fontオブジェクト

例1

let myFont;
function preload() {
  myFont = loadFont('assets/Inconsolata-Regular.ttf');
}

function setup() {
  createCanvas(300, 300);
  
  fill(' #ED225D');
  textFont(myFont);
  textSize(28);
  text('Inconsolata', 10, 50);
}

実行結果

例2

preload() の外で、オブジェクトを処理するためのコールバック関数を提供できます。

function setup() {  // preload() でないことに注意
  loadFont('assets / inconsolata.otf', drawText);
}

function drawText(font){
  fill(' #ED225D');
  textFont(font, 36);
  text('p5*js', 10, 50);
}

実行結果

著作権

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