我正在查看 this page on MDN .
在语法部分它说:
y ... The y-axis coordinate of the point at which to begin drawing the text, in pixels.
我从页面复制了他们的示例并将 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>
正如您在运行该代码片段时所见, Canvas 上看不到任何内容。所以 x
确实定义了左坐标,但是 y
没有定义绘制文本的顶部坐标。 y
定义了什么?是基线吗?
最佳答案
在坐标 (0,0)
处, Canvas 使用字母 i 的默认基线绘制文本。 e 上面绘制字符的线。
基线的位置可以根据 MDN 由以下属性控制:
具有基线挂起
的预期结果的示例工作代码:
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>
关于javascript - 调用Canvas Rendering Context2D.fill Text时Y坐标定义了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55646876/