在以下示例中，为什么第一个文本行的第一行在HTML5画布中不可见？

Question

我想使用画布显示40x25的文本字段。

在示例代码中，我使用8px字体并在每个文本位置显示字母“ A”。第一字符行的第一像素行不显示。当我在y = 1处开始第一个循环时，问题似乎已解决，但画布坐标从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”正方形（MDN reference）的顶部；

this question about Tex中的这张图片演示了绘制字体字形的含义

Source

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

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

Answer 2

因此，就像您说的那样，画布从左上角的0,0开始。但是0,0是画布开始的最角落，因此在该坐标处文本将不可见。如果算上A，则在x轴和y轴上都有一个空头。想一想，如果您要用从0,0开始的颜色填充该颜色，它将来自左上角的最顶端。要显示所有A，您需要从坐标1,1开始。