6_6:カスタムフォントの使用 p5.js JavaScript

p5.jsでは、TrueType(.ttf)フォントとOpenType(.otf)フォントを使ったテキストが描画できます。どちらかのタイプのカスタムフォントが用意できると、HTMLやsketch.jsといっしょにサーバーにアップロードして、ページを見るどの人にも同様にテキストを描画することができます。

以下は「果物と野菜の絵フォント」からダウンロードしたRiiFandV.otfファイルを使って、絵文字を描画する例です。

function setup() {
    // フォントを読み込む。読み込みが終わったらonLoadedコールバック関数を呼び出す
    loadFont('RiiFandV.otf', onLoaded);
    createCanvas(480, 120);
}
// loadFont()に渡したコールバック関数。フォントが渡される
onLoaded = (font) => {
    // 使用フォントを指定
    textFont(font);
    textSize(72);
}

function draw() {
    background(102);
    text('abcdefg', 10, 80);
}

loadFont()

説明

ファイルまたはURLからopentypeフォントファイル(.otf, .ttf)をロードし、PFontオブジェクトを返す。この関数は非同期で動作する(読み込みが完了しないうちに次のコード行に進む)。

フォントへのパスはスケッチにリンクしたHTMLファイルからの相対パス。URLやそのほかのリモートにあるフォントのロードは、ブラウザに組み込まれているセキュリティ機能によってブロックされる可能性がある。

シンタックス

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

テキストの着色

テキストに色付けするには、塗り色のfill()と外枠線のstroke(),strokeWeight()が使用できます。

function setup() {
    // フォントを読み込む。読み込みが終わったらonLoadedコールバック関数を呼び出す
    loadFont('RiiFandV.otf', onLoaded);
    createCanvas(480, 120);
}
// loadFont()に渡したコールバック関数。フォントが渡される
onLoaded = (font) => {
    // 使用フォントを指定
    textFont(font);
    textSize(72);
    fill(255, 0, 0);
    strokeWeight(8);
    stroke(0, 0, 255);
}

function draw() {
    background(240);
    text('abcdef', 10, 80);
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA