HTML-Canvas -textBaseline- Eigenschaft
Beispiel
Zeichnen Sie eine rote Linie bei y=100 und platzieren Sie dann jedes Wort bei y=100 mit unterschiedlichen 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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Hinweis: Die textBaseline-Eigenschaft kann in Browsern anders funktionieren, insbesondere wenn "hängend" oder "ideografisch" verwendet wird.
Definition und Verwendung
Die Eigenschaft textBaseline legt die aktuelle Textbasislinie fest oder gibt sie zurück, die beim Zeichnen von Text verwendet wird.
Die folgende Abbildung zeigt die verschiedenen Grundlinien, die vom Attribut textBaseline unterstützt werden:
Hinweis: Die Methoden fillText() und strokeText() verwenden den angegebenen textBaseline-Wert, wenn sie den Text auf der Leinwand positionieren.
| Standardwert: | alphabetisch |
|---|---|
| JavaScript-Syntax: | context .textBaseline = "alphabetisch|oben|hängend|mitte|ideografisch|unten"; |
Eigenschaftswerte
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
❮ Canvas-Objekt