Beispiel
Zeichnet eine rote Linie bei y = 100 ist, dann legen jedes Wort bei y = 100 mit verschiedenen Textbaseline-Werten:
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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note: Die Textbaseline - Eigenschaft kann anders funktioniert in Browsern, vor allem bei der Verwendung von "hanging" oder "ideographic" .
Definition und Verwendung
Die Textbaseline-Eigenschaft legt oder gibt die aktuelle Textgrundlinie verwendet wird, wenn Text zeichnen.
Die folgende Abbildung zeigt die verschiedenen von dem unterstützten Basislinien textBaseline - Attribut:
Note: Die fillText() und strokeText() Methoden werden den angegebenen Wert Textbaseline verwenden , wenn auf der Leinwand , um den Text zu positionieren.
| Standardwert: | alphabetic |
|---|---|
| JavaScript-Syntax: | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Eigenschaftswerte
| Werte | Beschreibung | Spiel es |
|---|---|---|
| alphabetisch | Standard. Die Textgrundlinie ist die normale alphabetische Grundlinie | Spiel es " |
| oben | Die Textgrundlinie ist die Oberseite des em-Quadrat | Spiel es " |
| hängend | Die Textgrundlinie ist die hängende Baseline | Spiel es " |
| Mitte | Der Text Grundlinie ist die Mitte des em-Quadrat | Spiel es " |
| ideographic | Die Textgrundlinie ist die ideographic Baseline | Spiel es " |
| Boden | Die Textgrundlinie ist der Boden der Begrenzungsbox | Spiel es " |
<Canvas Object