Что определяет координата Y при вызове Canvas Rendering Context2D.fill Text?

Question

Я смотрю на эту страницу в 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

What does y define? 

Координата оси Y точки, с которой начинается рисование текста, в пикселях. Это означает, что координата оси Y должна быть больше, чем. Если вы определите это как 0 или отрицательное значение, то canvas станет invisible.

Просто возьмите пример, поскольку у вас есть простая бумага с скоординированной и только положительной координатой оси 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>