p5.js | textStyle() 函数

简介

在 p5.js 中，textStyle() 函数用于设置文本样式属性。可以使用该函数更改文本的字体、大小、样式、对齐方式和描边等。

语法

textStyle(style)

• style：指定字体样式的常量或字符串值。

常量值

• NORMAL：普通字体风格。
• ITALIC：斜体字体风格。
• BOLD：加粗字体风格。
• BOLDITALIC：加粗斜体字体风格。

例子

function setup() {
  createCanvas(400, 200);
  textSize(32);
  textStyle(ITALIC);
  text("Hello, World!", 50, 100);
}

在上面的例子中，我们使用 textStyle() 函数将文本的样式设置为斜体。

文字对齐方式

可以通过 textAlign() 函数来设置文本的对齐方式。textAlign() 函数接受一个参数，表示对齐方式的常量值。

textAlign(alignX, alignY)

• alignX：水平对齐方式的常量值（LEFT、CENTER、RIGHT）。
• alignY：垂直对齐方式的常量值（TOP、CENTER、BOTTOM）。

function setup() {
  createCanvas(400, 200);
  textSize(32);
  textAlign(CENTER, CENTER);
  text("Hello, World!", width / 2, height / 2);
}

在上面的例子中，我们使用 textAlign() 函数将文本的水平和垂直对齐方式都设置为居中。

描边和填充

可以使用 stroke() 函数来设置描边颜色，使用 fill() 函数来设置填充颜色。

function setup() {
  createCanvas(400, 200);
  textSize(32);
  textStyle(BOLD);
  fill(0, 255, 0);
  stroke(255, 0, 0);
  text("Hello, World!", 50, 100);
}

在上面的例子中，我们使用 fill() 函数将文本的填充颜色设置为绿色，使用 stroke() 函数将文本的描边颜色设置为红色，并使用 textStyle() 函数将文本的样式设置为加粗。

参考链接

• p5.js 文档