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

最新推荐文章于 2024-08-18 09:46:22 发布

PGzxc

最新推荐文章于 2024-08-18 09:46:22 发布

阅读量2.3k

点赞数

分类专栏： P5.js 文章标签： P5.js text

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/121516125

版权

P5.js 专栏收录该内容

28 篇文章 10 订阅

订阅专栏

一概述

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

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

2.1 语法

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

2.2 参数说明

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

2.3 示例

2.3.1 代码

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

loadFont(path, [callback], [onError])

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

3.2.2 textFont

textFont(font, [size])

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

3.3 示例

3.3.1 代码

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)	换行方式