点亮屏幕 屏幕里有多少个小点

你好，我是吴老师。

这份是给你自己读的——不用等我讲，你一段一段往下看，看到让你停下来的地方，就照着做一遍。看不懂的整段复制给 AI，加一句"请一次只解释一个概念，讲完问我一个小问题"。

读完之后，你应该能：说出屏幕有多少个小点、整屏换一次颜色要送多少数据；解释屏幕和 RGB 灯的发光原理有什么不一样；亲手测出"刷整屏比刷半屏慢几倍"；看懂你手上这块屏属于哪一类屏幕。

用时：60–90 分钟。准备：板子、数据线、已经接入板卡 Skill 的 WorkBuddy。

一、今天先弄明白一件事：屏幕到底有多大

上一课的反应力挑战里，你的屏幕上显示过"用时 438 毫秒"这样的字——那时候我只让你用屏幕看结果，没解释屏幕怎么工作的。今天补上。

你说"这块屏幕"，可屏幕到底是个什么东西？

它不像一盏灯，只有一个亮的地方。它是由很多很多个极小的点拼出来的一整片。今天第一件事，就是把这个"很多很多"数清楚。

先记住两个数字：横向 240 个点，纵向 320 个点。

横着数 240 个，竖着数 320 个——就像一张纸被划成 240 列、320 行的格子。每个小格子叫一个像素。

那么一共多少个？

240 × 320 = 76,800 个像素

七万六千八百个。 一块只有 2.8 寸的屏幕，里面挤着七万多个小点。这个数字是今天所有内容的地基，请把它记住。

二、第一步永远是查资料

屏幕最容易出错：不同板子的引脚、驱动、方向都不一样，凭印象猜，轻则花屏，重则一片黑。

我是小学生，正在学习这块 ESP32-S3 触摸屏板。
请先读取 esp32s3-touchboard-hardware-dev Skill，确认：
1. 屏幕型号和使用的显示库；
2. 屏幕的宽度、高度和显示方向，请说清哪个是横向、哪个是纵向；
3. 屏幕上一共有多少个像素，请把算式完整写出来；
4. 背光接在哪个 GPIO。
只检查和解释，不改代码、不烧录，用容易懂的话告诉我。

把 AI 的回答抄进这张表（并要求它给出文件路径）：

这几行数据是后面所有屏幕课的地基——第 5 课讲坐标时我们还要用它们。

三、把屏幕画成一格一格，点一下看看

七万六千八百个点挤在一起，你根本看不见它们。所以我们先做一件"作弊"的事：把屏幕划成大方格画出来，每一格代表一群像素。

画法是这样的：屏幕被横竖线切成一样大的小方格，格子里面是黑的。然后——

手指按住哪一格，哪一格就整块亮起来。同时，屏幕顶部显示手指的精确坐标。

让 AI 帮你做出来

请新建一个"屏幕是七万多个小格子"的实验：
1. 把屏幕横竖切成一样大的小方格，每一格的边长是 ___ 个小点
   （你自己定，注意屏幕宽 240 高 320 都要能被它整除，
   而且顶部还要留出一条信息栏）；
2. 用 ___ 颜色的细线画出这些格子，底色是黑的；
3. 手指按住哪一格，那一格就整块亮成 ___ 颜色，
   手指抬起来以后保持不动，让我能慢慢看；
4. 屏幕顶部留一条信息栏，用中文显示手指的精确坐标，
   写成"X 128  Y 96"这样，没按的时候显示"用手指点一下屏幕"。
触摸芯片请用项目里已经验证过的驱动，只读坐标，
不要做点击/滑动判断，也不要加界面控件。
请用中文注释；烧录前先运行 arduino-cli board list 核对端口；
另存一个新版本，保留原来的示例。

烧录后，重点看这几件事

1. 你的格子里，每一格是多少个小点？
2. 手指点下去，是整格亮起来，还是只有一个点亮？
3. 顶部显示的坐标，和你手指的位置对得上吗？按左上角时坐标接近 (0, 0) 吗？

会发现一件奇怪的事

慢慢把手指在一格里移动——格子没有换，可顶部的坐标一直在变。

对，这就是今天第二个要记住的点：

格子 ≠ 坐标。 格子是"一群小点"，坐标是"某一个具体的点"。 一格 16 个小点宽，那么同一个格子里，X 能从 128 一直变到 143。

打个比方：教室里的"第 3 排第 5 列"是一个格子，而"第 3 排第 5 列那个同学的座位"是坐标。格子是范围，坐标是具体位置。

关于触摸的说明：今天你用触摸，只是把它当成一个"知道手指在哪的零件"，没有学它怎么工作——它跟屏幕之间还会有些小脾气（比如方向对不对得上）。那些留给第 8 课专门讲。今天你只要用它的结果就够了。

四、灯和屏幕，最大的不一样在哪

现在回到上一课那颗 RGB 灯。

它们唯一的相同点，第 1 课你已经亲手验证过：颜色都可以看成红、绿、蓝三种光混出来的——红+绿=黄，三个都没有=黑（不发光）。

这一句就够了。今天重点看不一样的地方。

灯：自己发光

一颗 RGB 灯，通电就亮。红、绿、蓝三种光直接从灯珠里射出来。你看到的就是它发出的光。

屏幕：自己不会发光，靠"借光"

屏幕完全不同。屏幕的像素自己不发光。

它像无数个小窗帘：背后有一整片一直亮着的白光（叫背光），每个像素能做的就是——决定让多少光透过来。

• 想显示红色？让红的光多透一点，绿和蓝的光挡住。
• 想显示黑色？把光全挡住。
• 想显示白色？三种光全放过来。

所以你看到的画面，其实是"借来"的光被挡住了一部分之后的样子。

这就是为什么老师会说"屏幕黑得不够纯"——把光全挡住，背光那片白光还是亮着的，总会漏一点出来，不像关灯那样真的全黑。

数一数差多少

理解了这个差别，你就能理解一个吓人的数字：

给一颗 RGB 灯换颜色：三个数，红多少、绿多少、蓝多少，每个占 1 个字节：

1 + 1 + 1 = 3 个字节

给整块屏幕换颜色：每一个像素都得单独告诉一遍。多少像素来着？

76,800 个像素 × 每个 2 个字节 = 153,600 字节 ≈ 150 KB

灯是"1 个点"，屏幕是"7 万多个点"。 你按一下按钮，屏幕"唰"地变个颜色，背后是主控刚送出 15 万个数字；而那颗小灯变个色只要 3 个。

这个比喻要修正一处：抄书可以慢慢抄，屏幕却必须在很短时间内传完，否则你会看见画面"刷"过去。所以主控不是慢慢送，而是用 SPI 这条通道飞快地送。

（那个"2 个字节"是怎么来的，第八节专门讲。）

动手：让板子自己当秒表

数字是算出来的，还要能被看见。让板子自己计时：

请做一个测量实验，帮我比较"刷整屏"和"刷半屏"谁更慢：
1. 先在屏幕上方显示"准备测量"；
2. 记录开始时刻，然后整屏填充红色、蓝色交替，一共 100 次；
3. 记录结束时刻，在屏幕上显示"整屏 100 次：____ 毫秒"；
4. 按下 BOOT 后，只填充屏幕上半部分（一半的高度），同样交替 100 次，
   在屏幕上显示"半屏 100 次：____ 毫秒"。
请用中文注释，保留旧程序，烧录前核对端口。

先预测：整屏用的时间大约是半屏的几倍？写下来再烧录。

半屏像素只有一半，送的数据正好是一半。结果接近 2 倍的话，前面算的 15 万个字节就被你亲手验证了一次。差得远也别急——想一想：这 100 次里，除了"送数据"，还有没有别的事也在花时间？

五、像素到底是什么

前面一直说"像素"，现在正式认识它。

像素就是画面里的一个小点。

我们这块屏幕有 76,800 个像素，是那颗 RGB 灯（1 个"点"）的七万多倍。

整屏变红，不是屏幕上有个叫"红色"的开关，而是程序把这 76,800 个小点一个一个都设成了红色。

把一个小点放大 100 倍来看，它里面还有东西：三扇小窗子——红的、绿的、蓝的。每扇窗子能单独调"透多少光"，三个合起来就是你看到的颜色。

• 红窗子只透红光，绿窗子只透绿光，蓝窗子只透蓝光。
• 三个都放满 → 白色；三个都关掉 → 黑色。

和手机比一比：

手机像素是我们的三十多倍，所以需要更快的通道；我们这块屏小、速度要求低，用 SPI 就够了。区别在数量、发光方式和速度——用红绿蓝组成颜色这点，大家是一样的。

六、同样是红色，屏幕用的数字和灯不一样

给灯写 (40, 0, 0)，给屏幕也写 (40, 0, 0)，行吗？

RGB 灯：每个通道 1 个字节，0–255，三个通道共 3 个字节。

屏幕为了省数据，用另一种打包办法，叫 RGB565：

5 + 6 + 5 = 16 位，正好 2 个字节——这就是为什么一个像素只占 2 个字节，而不是 3 个。

代价是：屏幕能表示的颜色比灯少，红色只有 32 档。绿色多给一位，是因为人的眼睛对绿色更敏感。

让 AI 用实验给你看：

请在屏幕上做一个颜色对比实验：
上半屏用红色分量 ___，下半屏用红色分量 ___（两个不同的数值，你自己定），
其余通道都是 0，两种颜色之间留一条黑色分隔线。
再在程序里打印这两种颜色在屏幕库里实际对应的数值是多少。
请用中文注释解释 RGB565 是怎么把三个数装进两个字节的。
一次讲一点，讲完问我一个问题，等我回答。

这里你会认识一个新名字：tft.color565(红, 绿, 蓝)——把 0–255 的三个数，转换成屏幕认识的 2 字节数字的小工具。今天只认它这个名字，不学写法。

顺便记住："255 是最大值"只对灯成立。 屏幕上红色最多 32 档。不要想当然地把一个设备上的数字搬到另一个设备用。

七、屏幕的亮度有两个开关

这是今天最值得想的地方。

灯要变暗，只有一个办法：把颜色数值调小。

屏幕要变暗，有两个办法：

1. 把像素的颜色数值调小——让每个小窗子透过的光少一点；
2. 把背光调暗——把屏幕后面那片白光本身调暗。

前面说过，屏幕的像素自己不发光，它只控制"让多少光透过来"。那么后面那片白光有多亮，当然也直接决定了你看到的画面有多亮。

这块板的背光接在 GPIO45，可以用 PWM 调节。

做个有点反直觉的实验：

请做一个背光对比实验：
像素始终是低亮度红色，从头到尾不改变数值 ___（参考 40）；
背光分三档：最亮 / 一半 / 关闭，三档的亮度值你自己定 ___ / ___ / ___
（提示：最亮 255、一半 128、关闭 0）；
按 BOOT 切换三种状态，每次按下只切换一次，请做消抖；
屏幕上显示当前是第几档和背光数值。

先猜：第三档里，像素还是红的，但背光关了——你会看到什么？

答案大概是：屏幕变得很暗，甚至接近全黑——可程序里的像素明明还是红的。

这说明：屏幕上的"暗/亮"不只是像素颜色的事。这也是为什么手机可以"内容不变、只把亮度拉低"，而一颗 RGB 灯做不到这种分开控制。

八、你手上这块屏，属于哪一类

前面说屏幕"靠借光"，其实屏幕还有另一个家族——自己发光的。认识它们，你会更懂"为什么这块屏这样工作"。

先分清两大"家族"：一个靠"挡光"，一个靠自己发光

• 液晶屏（LCD）——靠挡光 它自己不会发光，是背后有个"背光灯"一直亮着，前面是一层层的"液晶小窗帘"，靠电压让某些窗帘转动，挡住或放行光，组合出颜色。你看到的颜色其实是"借光"。

  • 这里面按背光分又分两类：冷阴极灯管（老 LCD） 和 LED 背光（现在几乎所有液晶屏）。所以"LED 屏"大多其实还是液晶屏，只是背光改成了发光二极管（LED）——省电、更薄、更亮。

• OLED / AMOLED——靠自己发光 每个像素点就是一小颗有机发光二极管，通电自己就亮，不需要背光。所以黑的地方能真正熄灭（显示黑色时像素不耗电），对比度超高、特别省电（显示暗画面时），也能做得很薄、能弯曲。手机的高端屏、曲面屏多是这类。

再细分：TFT 和 IPS 是什么？

• TFT 是液晶屏的一种驱动技术（薄膜晶体管），它让每个像素都能被独立、快速地控制。绝大多数彩色液晶屏都是 TFT 屏。你手上这块 ILI9341 就是 TFT 液晶屏。TFT 像素反应快，适合显示动画。
• IPS 是 TFT 的一种面板改良，核心好处是可视角度大——你偏着头看，颜色基本不变；普通 TFT（VA 等）歪着看会发暗、偏色。IPS 屏色彩更准，但成本稍高。IPS 屏 = TFT 家族里"歪着头看也不变色"的一种。

一张表看懂它们的异同

一句话：说"LED 屏"时，多半指的是"液晶屏 + LED 背光"（它还是液晶，靠挡光）；真正"每个点自己发光"的是 OLED。你手上这块 TFT 液晶屏，背后是一排 LED 灯管，靠液晶"小窗帘"挡光成像——所以它有鲜艳的颜色，但黑得不够纯、歪着看会变暗，这些都是"借光"带来的天然局限。

那我们这块屏为什么选 TFT 液晶？

1. 够用：240×320、能显示彩色、反应快，课堂做动画、界面完全够。
2. 便宜：TFT 液晶成本低，适合学生人手一块。
3. 功耗可控：OLED 虽好但更贵、屏幕更小，且长时间显示彩色很耗电；TFT 液晶配 LED 背光更均衡。
4. 开发成熟：TFT-eSPI 这类库对 TFT 屏支持最好，资料多。

动手：验证"借光"这件事

现在你可以亲手验证上面说的"靠挡光"了——拿一个手电筒（或者手机手电筒），贴着屏幕照，同时把屏幕背光调到最低。你会看到：

• 屏幕上的图案还在（液晶挡住了光的形状），
• 但它现在是被你的手电筒照亮的——光从外面借进来的。

留给你的问题：如果有一天你把屏幕换成 OLED，你觉得"显示黑色""看一个静止图案""看动画"这三种场景里，哪种会明显变省电或变清晰？试着用"OLED 熄灭像素不耗电、对比度高"去推理一下。

九、亮度上限和故障自查

本课数值上限是 80，不是 255。 为什么？一颗灯发光面积很小，整块屏幕面积是它的成千上万倍，同样的数值，屏幕晃眼得多。（第 1 课灯的上限是 40；屏幕面积大，放宽到 80。）不要把整屏白光开到最大长时间盯着看——觉得刺眼就调回 40，保护眼睛比做完实验重要。

遇到问题先自查：

向 AI 描述时记住格式："我想让屏幕____，实际却是____。我按了____次 BOOT……"。"屏幕是黑的"是观察，"程序没烧进去"是推测——推测要用实验验证。

十、自检小测

先自己想，再点开对答案。

十一、还想玩点什么

只有一种颜色、一个按钮，能做的事其实不少：

挑战：自己设计一套规则

把空补上，交给 AI 之前先自己填完：

我想做一个"____"作品。
屏幕被切成每格 ____ 个小点；
我按下（或划过）屏幕时，屏幕会 ____。
规则是这样的：____
请先把规则写成表格，让我检查后再编译烧录。

几个方向参考：

完成后只改一个条件再验证：比如格子大小不变，只把"按一下走一步"改成"划过去连续涂色"。先预测，再试。

想做"屏幕上有按钮、能点能滑"的同学，请把想法记下来——那是界面，要用一套叫 LVGL 的工具。第 5 课会专门讲它（是什么、常用指令有哪些），第 8 课学完触摸我们再用它做真正的界面。今天只把"屏幕怎么显示颜色"弄明白——这恰恰是后面所有画面的地基。

下一课，我们给板子装一根"电话线"：让沉默的板子开口说话，也听懂你说的话。