Canvas textBaseline Eigenschaft

Canvas-Referenzhandbuch

Definition und Verwendung

Die Eigenschaft textBaseline legt fest oder gibt die aktuelle Textgrundlinie zurück, wenn Text gezeichnet wird.

Das folgende Diagramm zeigt die verschiedenen Basen, die von der textBaseline-Eigenschaft unterstützt werden:

Text Baseline Diagram

Anmerkung:fillText() oder strokeText() Wenn Text auf dem Canvas positioniert wird, wird der angegebene textBaseline-Wert verwendet.

Beispiel

Definieren Sie ein Rechteck, das mit blau gefüllt wird:

Ihr Browser unterstützt das canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Zeichnen Sie eine blaue Linie an Position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Legen Sie jeden Begriff mit verschiedenen textBaseline-Werten bei y=200 ab
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

Probieren Sie es selbst aus

Syntax

Kontext.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Attributwert

Wert Beschreibung
alphabetic Standard. Die Textgrundlinie ist die gewöhnliche Buchstabengrundlinie.
top Die Textgrundlinie ist der obere Rand des em-Feldes.
hanging Die Textgrundlinie ist die hängende Grundlinie.
middle Die Textgrundlinie ist die Mitte des em-Feldes.
ideographic Die Textgrundlinie ist die Sinngrundlinie.
bottom Die Textgrundlinie ist der untere Rand des em-Feldes.

Technische Details

Standardwert: alphabetic

Browser-Unterstützung

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Version des Browsers, die das Attribut vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch