P5.js 文本 - JavaScript

P5.js 是一款基于 JavaScript 的创意编程库，可用于创建互动的图形、动画和音频等多种表现形式。其中，文本是一个在 P5.js 中常用的元素，主要用于展示信息、创建交互式 UI 和游戏界面等。本文将介绍 P5.js 中文本的相关知识点，希望能够帮助程序员更好地掌握使用方法。

创建文本对象

在 P5.js 中，使用 text() 函数可以创建文本对象。其基本语法为：

text(str, x, y);

其中，str 参数表示要显示的文本内容；x 和 y 则分别表示文本左上角的坐标位置。以创建一个简单的文本为例：

function setup() {
  createCanvas(400, 400);
  textSize(32);
  text("Hello World", 50, 50);
}

执行上述代码后，在画布中就会显示出一行字母 “Hello World”。

值得注意的是，在执行 text() 函数之前需要使用 textSize(size) 函数来设置字体大小，否则默认字体大小可能过小难以观察到效果。

设置文本样式

在创建文本时，可以根据需求设置不同的文本样式，例如修改字体、颜色、对齐方式等。P5.js 提供了多个函数来实现这些功能，下面分别列举几个常用的函数。

设置字体样式

使用 textFont(font, size) 函数可以设置文本的字体和字号。其中，font 参数表示字体名称（如 Arial）或字体的 URL 地址；size 表示字号大小。默认情况下，P5.js 会使用 sans-serif 字体。

例如，我们将文本字体设置为 Arial，并设置字号为 32：

function setup() {
  createCanvas(400, 400);
  textFont("Arial", 32);
  text("Hello World", 50, 50);
}

设置文本颜色

使用 fill(color) 函数可以设置文本的填充颜色。其中，color 参数可以是颜色的名称（如 red、green、blue 等）或 RGB 值。例如，将文本的颜色设置为红色：

function setup() {
  createCanvas(400, 400);
  textSize(32);
  fill("red");
  text("Hello World", 50, 50);
}

设置文本对齐方式

使用 textAlign(horizontal, vertical) 函数可以设置文本的水平对齐和垂直对齐方式。其中，horizontal 参数可以为 LEFT, CENTER, 或 RIGHT，表示文本的水平对齐方式；vertical 参数可以为 TOP, CENTER, BOTTOM, 或 BASELINE，表示文本的垂直对齐方式。例如，将文本设置为居中对齐：

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

在文本中使用变量

有时候，在文本中需要显示一些动态的内容，例如游戏中的得分或计时器等。这时候，可以使用模板字符串（Template Strings）来方便地在文本中插入变量。模板字符串用反引号（`）表示，其中插入的变量用 `${}` 括起来。例如，展示一个动态的计数器：

let count = 0;

function setup() {
  createCanvas(400, 400);
  textSize(32);
}

function draw() {
  background(220);
  fill(0);
  text(`Count: ${count}`, 50, 50);
}

function mouseClicked() {
  count++;
}

在上述代码中，我们使用了模板字符串来将计数器的值动态地传递给 text() 函数，使得每次点击鼠标时，文本的内容都会随之更新。

在文本上添加阴影

使用 textShadow(offsetX, offsetY, blur, color) 函数可以在文本上添加阴影。其中，offsetX 和 offsetY 分别表示阴影在水平方向和垂直方向的偏移量；blur 表示阴影的模糊程度；color 表示阴影的颜色。例如，添加一个黑色的阴影效果：

function setup() {
  createCanvas(400, 400);
  textSize(32);
  fill("red");
  textShadow(5, 5, 10, "black");
  text("Hello World", 50, 50);
}

总结

本文主要介绍了 P5.js 中文本的相关知识点，包括创建文本对象、设置文本样式、在文本中使用变量和添加阴影等。希望本文能够帮助程序员更好地掌握 P5.js 的文本绘制功能，为创意编程和可视化表达提供更多灵感。