调用CanvasRenderingContext2D.fill文本时Y坐标定义什么？

Question

我正在看this page on MDN。

在语法部分中说：

  

y ...开始绘制文本的点的y轴坐标，以像素为单位。

我从页面复制了他们的示例，并将y设置为0：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '50px serif';
ctx.fillText('Hello world', 0, 0);

<canvas id="canvas" width="400" height="150" style="border: 1px solid black"></canvas>

运行代码段时可以看到，画布上看不到任何内容。因此x确实定义了左坐标，但是y没有定义了绘制文本的顶坐标。 y的定义是什么？是基线吗？

Answer 1

在坐标(0,0)，画布以默认的字母i基线绘制文本。在上面绘制字符的e行。

可以根据MDN通过以下属性控制基线的位置：

使用基线hanging的示例工作代码以获得预期结果：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'hanging';
ctx.font = '50px serif';
ctx.fillText('Hello world', 0, 0);

<canvas id="canvas" width="400" height="150" style="border: 1px solid black"></canvas>

Codepen： https://codepen.io/nagasai/pen/abbNJVr

Answer 2

What does y define? 

开始绘制文本的点的y轴坐标（以像素为单位）。这意味着y轴坐标应大于。如果将其定义为0或负值，则画布将变为invisible。

仅举一个例子，因为您有一张简单的纸，该纸具有y轴的坐标且只有正坐标对您可见，因此，无论用负y轴还是0 y轴书写，它都永远不可见。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '50px serif';
ctx.fillText('Hello world', 0, 40);

<canvas id="canvas" width="400" height="150" style="border: 1px solid black"></canvas>