HTML Canvas textBaseline-Eigenschaft

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

Die textBaseline-Eigenschaft setzt oder gibt die aktuelle Textgrundlinie bei der Zeichnung von Text zurück.

Das folgende Bild zeigt die unterstützten Basen der textBaseline-Eigenschaft:

Text Baseline Diagram

Anmerkung:fillText() oder strokeText() Beim Lokalisieren von Text auf dem Canvas 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");
//Eine blaue Linie wird an Position y=100 gezeichnet
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Jede Wort wird mit verschiedenen textBaseline-Werten an y=200 platziert
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);

Selbst ausprobieren

Grammatik

context.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-Fensters.
hanging Die Textgrundlinie ist die hängende Grundlinie.
middle Die Textgrundlinie ist die Mitte des em-Fensters.
ideographic Die Textgrundlinie ist die semantische Grundlinie.
bottom Die Textgrundlinie ist der untere Rand des em-Fensters.

Technische Details

Standardwert: alphabetic

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft 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.

HTML5 Canvas Referenzhandbuch