为什么Canvas.FillText方法似乎使用了错误的坐标？

Question

我将文本渲染到HTML画布上，如下所示：

https://www.w3schools.com/code/tryit.asp?filename=FMSIQUFFO5PL

如您所见，应该以32、32渲染文本。但是由于某些原因，字符串看起来太高了。

这是因为Canvas的坐标始于Canvas-Element的左上角，而String的坐标始于String的左下角？

如何解决此问题，以便可以将文本精确地渲染到期望的位置？

Answer 1

默认情况下，垂直文本对齐方式（基线）设置为“字母”，它将文本的一般底部用作y坐标。

您可以通过设置textBaseline为“ top” 来更改此行为。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "32px Arial";
ctx.textAlign = "left";
ctx.textBaseline = "top";   // change baseline property
ctx.fillText("Hello World", 32, 32);

<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>