文字的艺术 - 文本绘制与样式

概念介绍

现在我们已经学会了绘制图形和设置颜色，让我们来学习如何在画布上显示文字！文字是我们表达思想的重要方式，在p5.js中，你可以用文字来标注图形、制作标题或者创作文字艺术。

学习目标

• 掌握text()函数的基本用法
• 学会设置文字大小、字体和对齐方式
• 理解文字在画布中的定位
• 学习创意文字应用

---

📝 文本绘制基础

text(message, x, y) - 显示文字

这是最基础的文字绘制函数，就像console.log()在控制台显示文字一样，text()在画布上显示文字。

🔄 与基础课程的连接

还记得基础课程中的console.log()吗？

• 基础课程：console.log("Hello World") - 在控制台显示文字
• p5.js课程：text("Hello World", 200, 150) - 在画布(200,150)位置显示文字

相同的想法，不同的显示位置！

---

🔤 文字样式设置

textSize(size) - 设置文字大小

控制文字的大小，让文字更突出或更精致。

textAlign(align, valign) - 设置文字对齐

设置文字的对齐方式，这对于文字布局非常重要！

对齐选项：

• LEFT（默认）、CENTER、RIGHT - 水平对齐
• TOP、CENTER、BASELINE、BOTTOM - 垂直对齐

---

💻 实践练习

练习1：文字坐标探索 🎯

理解文字的坐标系统：

重要理解： 文字的坐标(x,y)是文字的左下角位置！

练习2：创意文字标题 🎨

制作漂亮的标题效果：

练习3：图形标注 🏷️

给图形添加文字说明：

练习4：文字艺术创作 🎭

用文字创作有趣的效果：

练习5：简单标题制作 📰

创建不同大小的标题：

练习6：诗歌排版 📜

用文字创作诗歌或短句：

---

⚠️ 常见错误与解决方法

错误1：文字超出画布

错误2：忘记设置文字大小

---

🎯 本课重点总结

核心文字函数

• ✅ text(message, x, y) - 显示文字
• ✅ textSize(size) - 设置文字大小
• ✅ textAlign(align, valign) - 设置文字对齐
• ✅ fill(r, g, b) - 设置文字颜色（之前学过）

文字定位理解

• ✅ 坐标系统：文字坐标是左下角位置
• ✅ 对齐方式：LEFT/CENTER/RIGHT影响文字相对坐标点的位置
• ✅ 布局技巧：使用textAlign和坐标精确定位文字

与基础课程的连接

• ✅ 字符串应用：text()中的message就是字符串类型
• ✅ 参数传递：文字内容、位置、大小都是函数参数
• ✅ 坐标系统：延续上节课的画布坐标概念

---

🚀 下一步

太棒了！现在你的作品不仅可以有图形，还可以有文字说明和标签了！

下一课我们将学习：

• ⚡ 动画基础：让图形动起来
• 🎯 变量动画：用变量控制图形位置变化
• 🖱️ 鼠标交互：mouseX, mouseY 全局变量
• 🎬 动画原理：draw() 函数的循环执行

准备好让你的静态作品活起来了吗？

p5.js官方参考

• Reference: text()
• Reference: textSize()
• Reference: textAlign()
• Reference: Typography