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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。