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

p5.js中的textAlign()函數用於設置文本繪製的對齊方式。該函數接受兩個參數horizAlign和vertAlign。 horizAlign參數設置x軸的對齊方式，vertAlign參數設置y軸的對齊方式。

用法:

textAlign( horizAlign, vertAlign)

或者

textAlign()

參數：該函數接受上述和以下描述的兩個參數：

horizAlign:此參數將文本的水平對齊方式存儲為(左，中或右)。
vertAlign:此參數將文本的垂直對齊方式存儲為(TOP，BOTTOM，CENTER或BASELINE)。

以下程序說明了p5.js中的textAlign()函數：
範例1：本示例使用textAlign()函數將內容水平對齊。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(380, 150); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    let c = 0.5; 
      
    // Use atan() function to calculate 
    // arc tangent value 
    let ac = atan(c); 
      
    // Set font size 
    textSize(26); 
      
    // Set font color 
    fill(color('green')); 
      
    // Set the text alignment to 
    // CENTER, RIGHT, LEFT 
    textAlign(LEFT); 
    text('GEEKS', 100, 30); 
    textAlign(CENTER); 
    text('for', 100, 60); 
    textAlign(RIGHT); 
    text('GEEKS', 100, 90); 
}

輸出：

範例2：本示例使用textAlign()函數垂直對齊內容。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(380, 150); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Set the text size 
    textSize(26); 
      
    // Set the stroke width 
    strokeWeight(0.5); 
      
    // Set the coordinates for line 
    line(0, height/2, width, height/2); 
      
    // set the alignment for the text 
    textAlign(CENTER, TOP); 
      
    // Set the text  
    text('CENTER', 0, height/2, width); 
}

輸出：

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

相關用法

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