1. Canvas 波形绘制
波形通过 CanvasRenderingContext2D 绘制。
用 requestAnimationFrame 驱动重绘，并按 window.devicePixelRatio 调整画布像素尺寸。
实际帧率与开销取决于设备、画布尺寸和浏览器。
复古示波器伴读小机器人 (S5·BOT)
一个用 Canvas 和 SVG 绘制的示波器与小机器人。 可以切换模拟波形，调整时基、增益和噪声，也可以点击机器人查看预设对话。 波形由函数生成，频率和电压是示例参数，不是设备采集值。
TEK-S5000 DUAL-TRACE OSCILLOSCOPE
CANVAS DEMO
50.0 Hz
Vpp: 2.82V
1.0V / div
● TRIG'D
CH1
正弦波 (Sine)
f(θ) = sin(θ)
1.0x
1.0x
0%
18 种模拟波形
选择波形后，可调整时基、增益和噪声，查看形状与说明。
模拟与基础
正弦波 (Sine Wave)
50Hz · 1.0V/div用 sin(θ) 生成的正弦波，用来观察周期、幅度与噪声变化。
波形公式：
f(θ) = sin(θ)
绘制与交互实现
组件使用浏览器的 Canvas、SVG 和动画 API，没有引入图表库。
2. 弹簧阻尼跟随
机器人的天线与眼球用弹簧阻尼方程跟随光标：
a = (-k · Δx - c · v) / m 逐帧更新位置。
光标移动时会有轻微过冲，停止后逐渐回到稳定位置。
3. 用函数生成波形
波形由相位变量 θ 对应的函数逐帧生成。
方波通过有限级奇次谐波傅里叶级数合成，展示截断级数带来的边沿过冲；
马鞍波叠加 1/6 三次谐波；UART、I2C 和 CAN 用预设位序列示意电平变化。
4. 阅读时停靠右下角
使用 IntersectionObserver 监听顶栏舞台视口相交状态。
当原位置滚出视口时，小机器人切换为右下角悬浮卡片，
卡片上可以点击返回页顶。
如何在博客任意页面引入 S5·BOT？
样式放在 base.css，交互逻辑放入 robot-rainbow.js，页面通过 Liquid include 引入。
Jekyll Liquid 引入语法
{% include theme-spectrum.html %}