p5.js loadFont()用法及代碼示例

loadFont()函數用於從文件或URL加載字體，並將其作為PFont對象返回。加載的字體是格式為.otf或.ttf的opentype字體文件。

此方法本質上是異步的，因此在使用字體之前可能無法完成。因此建議將字體加載到preload()函數中。最好從相對路徑加載字體，因為某些瀏覽器可能由於瀏覽器的安全函數而阻止從其他遠程位置加載字體。

用法:

loadFont(path, callback, onError)

參數：此函數接受上述和以下所述的三個參數：

path:這是必須對字體進行塗抹的路徑。可以是
callback:此函數在加載字體後是一個可選參數。
onError:如果字體由於任何錯誤而無法加載，並且是可選參數，則調用此函數。

返回值：它返回具有給定字體的p5.Font對象。

以下示例說明了p5.js中的loadFont()函數：

範例1：

let newFont; 
   
// Loading font 
function preload() { 
  newFont =  
    loadFont('fonts/Montserrat.otf'); 
} 
   
//  Canvas area and color  
function setup() { 
  createCanvas(400, 200); 
  textSize(20); 
  fill("red"); 
  text('Click once to write using '
        + 'a new font', 20, 20); 
  fill("black"); 
   
  text('Using the default font', 20, 60); 
  text('This is text written using'
        + ' the new font', 20, 80); 
} 
   
// Changing font 
function mouseClicked() { 
  textFont(newFont); 
  textSize(20); 
  text('Using the Montserrat font', 
                        20, 140); 
    
  text('This is text written using'
        + ' the new font', 20, 160); 
}

輸出：
ex1

範例2：

let newFont; 
   
// Canvas area and loading font 
function setup() { 
  createCanvas(500, 200); 
  textSize(20); 
   
  text('The new font would be displayed'
        + ' when loaded', 20, 20); 
  loadFont('fonts/Montserrat.otf', fontLoaded); 
} 
   
// Changing font 
function fontLoaded(newFont) { 
  textFont(newFont); 
  text('The font has completed loading!', 20, 60); 
   
  let textDiv = createDiv('This is text written'
                + ' using the new font'); 
  textDiv.position(30, 80); 
  textDiv.style('font-family', 'Montserrat'); 
}

輸出：
ex2

在線編輯：

環境設置：

參考： https://p5js.org/reference/#/p5/loadfont

注意：由於缺少字體文件，因此無法通過在線編譯器訪問此函數。

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | loadFont() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。