p5.js 排版完整参考

简介

p5.js 是一个基于 Processing 开发的 JavaScript 库，可以用于创建图形、动画、游戏等交互式应用程序。其中，排版是 p5.js 库中的一个重要特性，可以用于设置文本的样式、位置等属性，并在画布上渲染出来。

排版 API

p5.js 提供了一系列的排版 API，这些 API 可以帮助用户轻松地实现各种文本排版效果。下面是常用的排版 API：

text(str, x, y)

渲染给定字符串 str 到指定位置 (x, y)。

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

function draw() {
  background(220);
  text("Hello World", 20, 40);
}

textSize(size)

设置当前文本大小为 size。

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

function draw() {
  background(220);
  text("Hello World", 20, 40);
}

textAlign(xAlign, yAlign)

设置文本对齐方式。xAlign 参数可以是 LEFT、RIGHT、CENTER，默认为 LEFT；yAlign 参数可以是 TOP、BOTTOM、CENTER、BASELINE，默认为 BASELINE。

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(220);
  text("Hello World", width / 2, height / 2);
}

textStyle(style)

设置当前文本样式，可以是 NORMAL、ITALIC、BOLD、BOLDITALIC。

function setup() {
  createCanvas(400, 400);
  textStyle(BOLD);
}

function draw() {
  background(220);
  text("Hello World", 20, 40);
}

textFont(font, size)

设置当前文本字体和大小。

let myFont;

function preload() {
  myFont = loadFont('assets/Roboto-Regular.ttf');
}

function setup() {
  createCanvas(400, 400);
  textFont(myFont, 32);
}

function draw() {
  background(220);
  text("Hello World", 20, 40);
}

textLeading(leading)

设置当前行距为 leading。

function setup() {
  createCanvas(400, 400);
  textSize(24);
  textLeading(36);
}

function draw() {
  background(220);
  text("Hello\nWorld", 20, 40);
}

textWidth(str)

返回给定字符串 str 的宽度。

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

function draw() {
  background(220);
  let str = "Hello World";
  text(str, 20, 40);
  let w = textWidth(str);
  line(20, 60, 20 + w, 60);
}

结语

p5.js 的排版 API 提供了丰富的功能，可以用于渲染文本、设置样式、位置等属性，实现各种令人惊叹的效果。希望这个参考能够帮助你更好地使用 p5.js 进行开发。