Beispiel
Zeichnen Sie eine rote Linie bei y=100 , dann legen jedes Wort bei y=100 mit verschiedenen Textbaseline - Werte:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
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); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| textBaseline | ja | 9.0 | ja | ja | ja |
Hinweis: Die Textbaseline - Eigenschaft funktioniert anders in verschiedenen Browsern, vor allem bei der Verwendung von "hanging" oder "ideographic" .
Definition und Verwendung
Die Textbaseline-Eigenschaft legt oder gibt den aktuellen Textbasislinie verwendet wird, wenn Text zeichnen.
Die folgende Abbildung zeigt die verschiedenen von der unterstützten Basislinien textBaseline - Attribut:
Hinweis: Die fillText() und strokeText() Methoden werden den angegebenen Wert Textbaseline verwenden , wenn auf der Leinwand , um den Text zu positionieren.
| Standardwert: | alphabetisch |
|---|---|
| JavaScript-Syntax: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Immobilienwerte
| Werte | Beschreibung | Spiel es |
|---|---|---|
| alphabetic | Standard. Die Textgrundlinie ist die normale alphabetische Basis | Spiel es " |
| top | Die Textgrundlinie ist die Oberseite des em-Quadrat | Spiel es " |
| hanging | Die Textgrundlinie ist die hängende Basis | Spiel es " |
| middle | Der Text Grundlinie ist die Mitte des em-Quadrat | Spiel es " |
| ideographic | Die Textgrundlinie ist die ideographic Basis | Spiel es " |
| bottom | Die Textgrundlinie ist die Unterseite des Begrenzungskastens | Spiel es " |