javascript - 为什么在以下示例中，第一行文本的第一行在 HTML5 Canvas 中不可见？

Question

我想使用 Canvas 来显示 40x25 的文本字段。

在示例代码中，我使用 8px 字体并在每个文本位置显示一个字母“A”。第一字符行的第一像素行不显示。当我在 y=1 处开始第一个循环时，问题似乎已解决，但 Canvas 坐标从 0,0 开始。

为什么会这样？

var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.font = "8px monospace";
ctx.textBaseline = "top";
for (y = 0; y < 200; y = y + 8) {
 for (x = 0; x < 320; x = x + 8) {
   ctx.fillText("A", x, y)
  }
}

<canvas id="screen" width="320" height="200"></canvas>

Answer 1

要回答评论，它似乎是使用的字体的问题 - 它似乎在“顶部”基线之上绘制(见下文)。

这是该代码段的略微修改版本，它未能显示在浏览器设置中使用 Courier New 作为默认等宽字体的问题。

"use strict";
var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.font = "8px monospace";
ctx.textBaseline = "top";
var charCode = "A".charCodeAt(0);
for (var y = 0; y < 200; y = y + 8, ++ charCode) {
 var char = String.fromCharCode( charCode);
 for (var x = 0; x < 320; x = x + 8) {
   ctx.fillText(char, x, y)
  }
}

canvas {border: 1px solid red;}

<canvas id="screen" width="320" height="200"></canvas>

---

(更新)

将上下文的 baseLine 属性的值设置为“top”，将基线设置为“em”方 block (MDN reference) 的顶部；

这张图片来自 this question about Tex演示了绘制字体字形的意义

Source

如果字体绘制在 em 正方形的顶部上方，则该部分字形将不会呈现在 Canvas 上绘制的第一行中。该图片还暗示字体可以在 em 框上方有一个上边界线。

这似乎是 Ubuntu 系统上使用的字体的情况。请注意，“monospace”是一个非特定的字体系列，而不是一种字体。您可以在 Firefox 选项页面的搜索框中输入“等宽字体”，然后单击字体和颜色下方的“高级”按钮，找到实际使用的字体。