p5.js | textAlign()函数

p5.js 中的textAlign()函数用于设置绘制文本的对齐方式。该函数接受两个参数 horizAlign 和 vertAlign。 horizAlign 参数设置 x 轴对齐，vertAlign 参数设置 y 轴对齐。

句法：

textAlign( horizAlign, vertAlign)

或者

textAlign()

参数：该函数接受上面提到的两个参数，如下所述：

• horizAlign：此参数将文本的水平对齐方式存储为（LEFT、CENTER 或 RIGHT）。
• 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 co-ordinates 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