P5.js开发之——文字(7)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • P5.js显示文字
  • P5.js加载文字字体
  • P5.js文字属性

二 P5.js显示文字——text()

2.1 语法

1
text(str, x, y, [x2], [y2])

2.2 参数说明

属性 类型 说明
str 字符串\物件\数组\数字\布尔值 该显示的字母数字符号
x 数字 文字的 x 坐标
y 数字 文字的 y 坐标
x2 数字 文字格的宽度
y2 数字 文字格的高度

2.3 示例

2.3.1 代码

1
2
3
4
5
function draw() {
  let s = 'P5.js';
  textSize(32);
  text(s, 10, 10, 70, 80);
}

2.3.2 效果图

三 P5.js加载文字字体——loadFont/textFont

3.1 说明

  • loadFont：从一个文件或网址加载字形文字(.otf、.ttf)
  • textFont：定义使用 text() 函数绘制文字时该使用的字形

3.2 语法

3.2.1 loadFont

1
loadFont(path, [callback], [onError])
参数 类型 说明
path 字符串 该加载的字形名字或网址
callback 函数 在 loadFont() 完成后该调用的函数
onError 函数 在发生错误时该调用的函数

3.2.2 textFont

1
textFont(font, [size])
参数 类型 说明
font 字符串 一个使用 loadFont() 加载的字形
size 数字 字形大小

3.3 示例

3.3.1 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
let myFont;
function preload() {
  myFont = loadFont('assets/ComingSoon.ttf');
}

function draw() 
{
	let s = 'P5.js';
	textFont(myFont);
	textSize(32);
	text(s, 10, 10, 70, 80);

}

3.3.2 效果图

四 P5.js文字属性

属性 用法 说明
textAlign textAlign(horizAlign, [vertAlign]) 对齐方向
textLeading textLeading(leading) 行与行之间的像素距离
textSize textSize(theSize) 字体大小
textStyle textStyle(theStyle) 字体的风格
textWidth textWidth(theText) 字符串的宽度
textAscent textAscent() 整体高度
textDescent textDescent() 下端线高度
textWrap textWrap(wrapStyle) 换行方式

五 参考

5.1 文字

  • P5.js—参考文献—text

5.2 字体

  • P5.js—参考文献—loadFont
  • P5.js—参考文献—textFont

5.3 属性

  • P5.js—参考文献—textAlign
  • P5.js—参考文献—textLeading
  • P5.js—参考文献—textSize
  • P5.js—参考文献—textStyle
  • P5.js—参考文献—textWidth
  • P5.js—参考文献—textAscent
  • P5.js—参考文献—textDescent
  • P5.js—参考文献—textWrap