直线、矩形与圆形
绘制图形，构建简单的用户界面
直线、矩形与圆形 是 CoddyKit 上的免费 Arduino & IoT Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Arduino & IoT Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Arduino & IoT Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Beyond Text
Text alone gets dull. The GFX library also draws shapes, so you can frame data, build meters, and design a real little interface. 🎨
The Pixel Grid
Every shape lives on a coordinate grid. Point (0,0) is top-left; x runs right and y runs down, just like the text cursor you already used.
Draw a Single Pixel
The smallest mark is one dot. drawPixel takes an x, a y, and a color, lighting exactly one point on the screen.
display.drawPixel(10, 10, WHITE);Draw a Line
drawLine connects two points. Give a start x and y, an end x and y, and a color to stroke a straight line between them.
display.drawLine(0, 0, 127, 63, WHITE);Outline a Rectangle
drawRect needs a top-left x and y, then a width and height. It strokes just the border, perfect for framing a value or a section.
display.drawRect(0, 0, 60, 30, WHITE);Fill a Rectangle
Swap to fillRect with the same arguments to paint the whole box solid. Filled bars are the heart of meters and progress displays.
display.fillRect(0, 0, 60, 30, WHITE);Outline a Circle
drawCircle takes a center x and y plus a radius. It strokes a ring, handy for dials, status dots, or rounded icons.
display.drawCircle(64, 32, 20, WHITE);Fill a Circle
Use fillCircle for a solid disc. A small filled circle makes a clear on/off indicator that is easy to read at a glance.
display.fillCircle(64, 32, 5, WHITE);Rounded Rectangles
For a softer look, drawRoundRect adds a corner radius after width and height. Rounded boxes make buttons and cards feel friendlier.
display.drawRoundRect(0, 0, 60, 30, 8, WHITE);Layer Shapes and Text
Order matters: shapes drawn later sit on top. Draw a filled box first, then print text over it for a labeled badge effect.
display.fillRect(0, 0, 50, 16, WHITE);
display.setTextColor(BLACK);Then Push to Screen
As always, all drawing fills the buffer. End your shape work with display.display() so the whole composed image appears at once.
display.display();Quick Check
You want a solid bar to show how full a tank is.
Recap
You can now draw pixels, lines, rectangles, and circles, and layer shapes with text. These primitives are all you need to compose a real UI.
常见问题解答
「直线、矩形与圆形」课时是免费的吗？
是的 — 「直线、矩形与圆形」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Arduino & IoT Academy 课程的其余内容，请升级到 CoddyKit PRO。 Arduino & IoT Academy 课程共包含 4 节课。
「直线、矩形与圆形」这节课中我会学到什么？
绘制图形，构建简单的用户界面 你通过在浏览器中直接运行的动手代码来练习 Arduino & IoT Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Arduino & IoT Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Arduino & IoT Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「直线、矩形与圆形」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Arduino & IoT Academy 课中编写并运行代码吗？
能。每节 Arduino & IoT Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。