Warum scheint die Canvas.FillText-Methode falsche Koordinaten zu verwenden?

Question

Ich bin Rendering Text auf eine HTML-Canvas wie so:

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

Wie Sie sehen können, wird der Text soll auf 32 zu erbringenden, 32. Aber aus irgendwelchen Gründen scheint die Zeichenfolge zu hoch .

Dies liegt daran, dass die Canvas-Koordinaten in der oberen linken Ecke des Canvas-Elements und die Koordinaten des Strings in der unteren linken Ecke des Strings beginnen?

Wie kann ich dieses Problem umgehen, damit ich Text genau an der Position wiedergeben kann, an der ich es erwarte?

Answer 1

Standardmäßig ist die vertikale Textausrichtung (Baseline) auf "alphabetisch" eingestellt, wobei der allgemeine untere Textbereich für die y-Koordinate verwendet wird.

können Sie dieses Verhalten durch textBaseline Einstellung ändern, um "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>