Canvas 像素字体生成：正确处理宽度过 8px 的位图编码
本文详解如何在 canvas 中准确生成适用于嵌入式显示设备的像素字体 hex 数据，重点解决宽度超过 8px 时因位序与字节填充逻辑错误导致的字符翻转问题。
在使用 HTML5
? 问题根源：Y 轴遍历方向与字节填充逻辑错位
原代码中内层循环为：
for (let y = actualHeight - 1; y >= 0; y--) { ... }即从最后一行（底部）向上逐行读取，并将每列像素按 MSB→LSB（高位→低位）顺序拼入一个字节。这种
设计适用于高度 ≤ 8 的字体（如经典 5×7），因为一列刚好填满一个字节（8 bits），且硬件常以“从上到下”扫描，但字节内位序却是反向存储（最高位对应第0行）。
然而，当 actualHeight > 8（如 14 行）时，规范要求：
✅ 每个字节存储连续的 8 行像素（从顶到底）；
✅ 超出 8 行则新开一个字节，继续向下填充；
❌ 原逻辑从底向上读 + 高位优先拼接 → 导致视觉上“顶部像素”被塞进字节低位，“底部像素”占据高位，最终在硬件渲染时上下颠倒。
✅ 正确实现：按自然阅读顺序逐行采集，低位优先填充字节
应改为：
- 外层遍历列（x），保持不变；
- 内层遍历行（y）从 0 到 actualHeight - 1（即从顶到底）；
- 每个 bit 按 LSB → MSB 顺序累加（即 bit × 2^exp，exp 从 0 开始递增）；
- 每满 8 位（exp === 8）或到达最后一行时，推入字节并重置。
以下是修正后的完整逻辑（兼容任意宽高，含 Canvas 实际读取示例）：
function canvasToFontBytes(ctx, width, height) {
const pxlArray = [];
for (let x = 0; x < width; x++) {
let byte = 0;
let exp = 0; // 当前位权重指数（0 → 2⁰，即 LSB）
const byteSize = 8;
for (let y = 0; y < height; y++) {
// ✅ 从第0行（顶部）开始向下读取
const pixel = ctx.getImageData(x, y, 1, 1).data;
const isOn = pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0 && pixel[3] === 255;
// ✅ LSB 优先：第0行 → bit0，第1行 → bit1，... 第7行 → bit7
byte += (isOn ? 1 : 0) * Math.pow(2, exp);
exp++;
// ✅ 满8位或已到底部，存字节并重置
if (exp === byteSize || y === height - 1) {
pxlArray.push(byte);
byte = 0;
exp = 0;
}
}
}
return pxlArray;
}
// 使用示例（假设已绘制 10×14 字母 A）
const canvas = document.createElement('canvas');
canvas.width = 10;
canvas.height = 14;
const ctx = canvas.getContext('2d');
// ? 此处用 clearRect + fillRect 绘制你的 A（按常规从上到下、从左到右）
ctx.fillStyle = '#000';
ctx.fillRect(3, 0, 4, 3); // 顶横线
ctx.fillRect(2, 3, 2, 3); // 左上斜
ctx.fillRect(5, 3, 2, 3); // 右上斜
// ...（完整绘制逻辑略）
// ✅ 绘制方式完全按视觉习惯，无需翻转！
const bytes = canvasToFontBytes(ctx, 10, 14);
console.log(bytes.map(b => b.toString(16).padStart(2, '0'))); // 输出 HEX 数组
// → ['00','38','c0','3f','f8','0f','3e','03','06','03','06','03','3e','03','f8','0f','c0','3f','00','38']⚠️ 关键注意事项
- 位序一致性：务必确认目标硬件文档——多数嵌入式点阵控制器（如 MAX7219、HT16K33）采用 "top-to-bottom, LSB-first per byte" 模式，即本方案所实现的逻辑。
- 字节对齐：若字体高度非 8 的倍数（如 14 行），每列会生成 ceil(14 / 8) = 2 字节，第二字节低 6 位为 0（补零），这与你期望输出 [..., 0, 56, ...] 完全一致。
- 性能优化：getImageData() 在大画布上较慢。生产环境建议预先缓存像素数组，或改用 ctx.createImageData() + 手动写入 Uint8ClampedArray。
- 颜色鲁棒性：实际项目中可放宽判断条件（如 a > 200 && r + g + b
✅ 总结
只要将内层 y 循环改为 0 → height-1，并采用 bit × 2^exp（exp 从 0 开始）的 LSB 优先拼接方式，即可彻底解决宽字体上下颠倒问题。你不再需要“把 A 的下半部分画在上面”——所见即所得，所绘即所存。这一逻辑既符合人类直觉，也严格匹配主流嵌入式显示协议，是像素字体工程化的可靠基石。
