u8g2-js：打通单色屏开发 Web 仿真的最后一公里

CacheRivulet

u8g2-js

U8G2 单色图形库的纯 JS 移植 —— 在浏览器里像素级仿真单色屏显示，AI 开发并视觉验证后，同一份代码直接部署真机。

U8G2：单色屏的事实标准

OLED、单色点阵液晶屏（12864 那种灰白屏）、墨水屏这类单色屏，资源有限，跑不动 LVGL 那种重型 GUI；它们的图形库事实标准是 U8G2——支持几十种屏幕控制器、庞大的字体库、内存占用极小。做单色屏显示，基本就是 U8G2。

痛点

U8G2 开发很慢：改一次显示效果，就要重新编译、烧录、上板看，一轮几十秒到几分钟；AI 写的 U8G2 代码经常"能编译过、屏幕不对"，字体、坐标、布局来回调都不对。

本项目：u8g2-js

我们把 U8G2 完整移植成纯 JS，在浏览器里像素级仿真单色屏。AI（Codex / Claude）在浏览器里完成整个闭环：

1. 开发 U8G2 显示界面（JavaScript，浏览器原样运行）

2. 视觉验证：运行、截图，多模态识图逐像素检查

3. 用户确认：效果符合预期，即通过

4. 部署：同一份代码上真机（与原生 U8G2 C 库 API 一致）

显示逻辑在浏览器里提前验证，而不是上板后才发现问题。

仓库： github.com/createskyblue/u8g2-js

在线演示： createskyblue.github.io/u8g2-js

为什么同一份代码能上真机

• 像素级还原：拿同一个官方 Demo，用 gcc 编译的 C 版跑一遍、导出屏幕像素图，JS 版再跑一遍、导出屏幕像素图，两张图逐像素对比，差异 = 0。帧缓冲、字体、draw_color、旋转——浏览器里看到什么，真机就是什么
• 字体即字节数组：运行时加载任意 U8G2 字体；内置全量中文字库（宋体 8/10/12/16/24/32 px）
• 零依赖纯 ESM：浏览器 / Node 直接跑
  
  

快速开始

1. import { U8g2, U8g2Font } from './src/index.js';
   
2. 
   
3. const u8g2 = new U8g2({ display: 'ssd1306_128x64_noname_f' });
   
4. u8g2.setFont(U8g2Font.fromBase64('AP//AA...')); // 字体就是字节数组
   
5. u8g2.drawStr(0, 10, 'Hello');
   
6. u8g2.sendBuffer();
   
7. u8g2.attachCanvas(document.getElementById('screen'));

复制代码

在项目根目录起 live server（npx serve .）→ 打开 index.html 进入各示例。

License

BSD-2-Clause，保留原 U8G2 版权声明。

---

build 06 August 2026 14:42 (UTC+8)

了无

非常好的东西啊

eric2013

谢谢楼主分享。

sblpp

谢谢楼主分享。

会飞的猪_2020

谢谢分享，不过我这边好像 无法访问 github.io的主页。

hesper

谢谢分享

world_all

这个很方便啊，谢谢楼主

honami520

做的不错，不过能不能增加屏幕尺寸的设置，自动根据当前显示器和设置，按照真实的显示屏大小去显示出来。
因为光看像素是差不多，但是上了液晶屏后，还是有区别。
有些字体、图案，上了屏发现太小，不合适，还是得修改

xy201207

支持多级灰度吗？

xy201207

支持多级灰度吗？

CacheRivulet

xy201207 发表于 2026-8-7 11:29
支持多级灰度吗？

不支持，这个库是单色屏的。Demo 里面的灰度进行了特殊处理，单独弄了一个灰度通道，然后抖动成单色调