HTML-Leinwand Eigenschaft Textbaseline
Beispiele
In y Draw = 100 eine rote Linie, dann y = 100 Chu Textbaseline mit unterschiedlichen Werten jedes Wort gesetzt werden:
JavaScript:
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);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen Textbaseline-Eigenschaft.
Hinweis: Textbaseline unterschiedliche Auswirkungen auf die verschiedenen Browser - Attribut, insbesondere die Verwendung von "hängen" oder "ideographic" , wenn.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
Textbaseline-Eigenschaft legt oder gibt den Text an, wenn die aktuelle Textbasislinie zu ziehen.
Die folgende Abbildung zeigt Textbaseline Basislinien unterstützten Attribute:
Hinweis: fillText () und strokeText () Methode auf der Leinwand bei der Positionierung der Text Textbaseline angegebenen Wert verwendet werden.
| Standard: | alphabetisch |
|---|---|
| JavaScript-Syntax: | Kontext .textBaseline = "alphabetisch | oben |hängend | Mitte | ideographic | bottom"; |
Eigenschaft Wert
| 值 | 描述 |
|---|---|
| alphabetic | 默认。文本基线是普通的字母基线。 |
| top | 文本基线是 em 方框的顶端。 |
| hanging | 文本基线是悬挂基线。 |
| middle | 文本基线是 em 方框的正中。 |
| ideographic | 文本基线是表意基线。 |
| bottom | 文本基线是 em 方框的底端。 |