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

Question

我正在将文本渲染到HTML-Canvas上，如下所示：

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

正如您所看到的，文本应该在32,32处呈现。但由于某些原因，字符串显得过高。

这是因为Canvas'坐标从Canvas-Element的左上角开始，String的坐标位于String的左下角？

如何处理这个问题，以便我可以准确地将文本呈现在我期望的位置？

Answer 1

默认情况下，垂直文本对齐（基线）设置为＆＃34;字母＆＃34;它使用文本的一般底部作为y坐标。

您可以通过将textBaseline设置为＆＃34; top＆＃34;来更改此行为。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;