当前位置: 首页>>代码示例>>用法及示例精选>>正文


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

p5.j​​s中的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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。