Canvas创建宽超8px像素字体：DEC值与图案对应异常求助

问题背景 #

我使用Canvas绘制像素化字母，需要将其导出为HEX值集合（先生成DEC数组再转换为HEX），用于特定显示器，对准确性要求极高。

• 宽度≤8px的Canvas上，生成的DEC值与给定像素字符值完全匹配；
• 宽度超过8px时，需为每一行像素新增一个字节。

当前用于生成DEC值的循环代码：

for (let x = 0; x < actualWidth; x++) {
  let col = 0;
  let bit = 0;

  for (let y = actualHeight - 1; y >= 0; y--) {
    const tempData = tempContext.getImageData(x, y, 1, 1).data;
    const r = tempData[0];
    const g = tempData[1];
    const b = tempData[2];
    const a = tempData[3];
    const isOn = r === 0 && g === 0 && b === 0 && a === 255;

    col = (col << 1) | (isOn ? 1 : 0);
    bit++;

    if (bit === 8 || (y === 0 && bit > 0)) {
      pxlArray.push(col);
      col = 0;
      bit = 0;
    }
  }
}

console.log(pxlArray);

测试情况 #

1. 5x7 Canvas（正常）
   绘制字母A的像素图案：

00100
01010
10001
10001
11111
10001
10001

生成的DEC数组[124, 18, 17, 18, 124]完全符合预期。

2. 10x14 Canvas（异常）
   绘制字母A的正常像素图案：

0001111000
0001111000
0001111000
0011001100
0011001100
0011001100
0110000110
0110000110
0111111110
0111111110
0110000110
1110000111
1100000011
1100000011

无法得到预期的DEC数组[0, 56, 192, 63, 248, 15, 62, 3, 6, 3, 6, 3, 62, 3, 248, 15, 192, 63, 0, 56]，只有将图案上下颠倒绘制才能生成目标数组，不符合需求。

解决方案 #

问题核心在于像素行的遍历方向与目标数组的要求不匹配：目标数组需要从图案顶部行开始处理，而当前代码从底部行向上遍历，导致顺序颠倒。

修改后的代码如下：

for (let x = 0; x < actualWidth; x++) {
  let col = 0;
  let bit = 0;

  // 从顶部y=0开始向下遍历像素行，匹配目标数组的行顺序
  for (let y = 0; y < actualHeight; y++) {
    const tempData = tempContext.getImageData(x, y, 1, 1).data;
    const r = tempData[0];
    const g = tempData[1];
    const b = tempData[2];
    const a = tempData[3];
    const isOn = r === 0 && g === 0 && b === 0 && a === 255;

    col = (col << 1) | (isOn ? 1 : 0);
    bit++;

    // 修正终止条件：遍历到最后一行（底部行）时，存入剩余位的字节
    if (bit === 8 || (y === actualHeight - 1 && bit > 0)) {
      pxlArray.push(col);
      col = 0;
      bit = 0;
    }
  }
}

console.log(pxlArray);

修改说明 #

1. 遍历方向调整：将for (let y = actualHeight - 1; y >= 0; y--)改为for (let y = 0; y < actualHeight; y++)，从图案顶部开始处理像素行，完全匹配目标数组的顺序要求；
2. 终止条件修正：将y === 0改为y === actualHeight - 1，确保遍历到最后一行时，剩余的位能正确存入字节。

修改后，正常绘制的10x14字母A图案即可生成预期的DEC数组。

内容的提问来源于stack exchange，提问作者Asterios Kalogeras