TextMetrics

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist inWeb Workers verfügbar.

DasTextMetrics-Interface repräsentiert die Dimensionen eines Textstücks auf demcanvas; eineTextMetrics-Instanz kann mit der MethodeCanvasRenderingContext2D.measureText() abgerufen werden.

Instanz-Eigenschaften

TextMetrics.widthSchreibgeschützt: Gibt die Breite eines Segments von Inline-Text in CSS-Pixeln zurück. Sie berücksichtigt die aktuelle Schriftart des Kontexts.
TextMetrics.actualBoundingBoxLeftSchreibgeschützt: Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch dieCanvasRenderingContext2D.textAlign-Eigenschaft angegeben wird, zur linken Seite des Begrenzungsrechtecks des angegebenen Textes, in CSS-Pixeln; positive Zahlen zeigen einen Abstand nach links vom gegebenen Ausrichtungspunkt.
TextMetrics.actualBoundingBoxRightSchreibgeschützt: Gibt den Abstand vom Ausrichtungspunkt, der durch dieCanvasRenderingContext2D.textAlign-Eigenschaft angegeben wird, zur rechten Seite des Begrenzungsrechtecks des angegebenen Textes in CSS-Pixeln zurück. Der Abstand wird parallel zur Grundlinie gemessen.
TextMetrics.fontBoundingBoxAscentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dasCanvasRenderingContext2D.textBaseline-Attribut angezeigt wird, zur Oberseite des höchsten Begrenzungsrechtecks aller Schriften zurück, die verwendet werden, um den Text zu rendern, in CSS-Pixeln.
TextMetrics.fontBoundingBoxDescentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dasCanvasRenderingContext2D.textBaseline-Attribut angezeigt wird, zur Unterseite des Begrenzungsrechtecks aller Schriften zurück, die verwendet werden, um den Text zu rendern, in CSS-Pixeln.
TextMetrics.actualBoundingBoxAscentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dasCanvasRenderingContext2D.textBaseline-Attribut angezeigt wird, zur Oberseite des Begrenzungsrechtecks zurück, das verwendet wird, um den Text zu rendern, in CSS-Pixeln.
TextMetrics.actualBoundingBoxDescentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dasCanvasRenderingContext2D.textBaseline-Attribut angezeigt wird, zur Unterseite des Begrenzungsrechtecks zurück, das verwendet wird, um den Text zu rendern, in CSS-Pixeln.
TextMetrics.emHeightAscentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dieCanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur Oberseite desem-Quadrats im Linienkasten zurück, in CSS-Pixeln.
TextMetrics.emHeightDescentSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dieCanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur Unterseite desem-Quadrats im Linienkasten zurück, in CSS-Pixeln.
TextMetrics.hangingBaselineSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dieCanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur hängenden Grundlinie des Linienkastens zurück, in CSS-Pixeln.
TextMetrics.alphabeticBaselineSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dieCanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zuralphabetischen Grundlinie des Linienkastens zurück, in CSS-Pixeln.
TextMetrics.ideographicBaselineSchreibgeschützt: Gibt den Abstand von der horizontalen Linie, die durch dieCanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur ideografischen Grundlinie des Linienkastens zurück, in CSS-Pixeln.

Beispiele

Veranschaulichung der Grundlinien

Dieses Beispiel zeigt die Grundlinien, die dasTextMetrics-Objekt enthält. Die Standard-Grundlinie ist diealphabeticBaseline. Siehe auch dieCanvasRenderingContext2D.textBaseline-Eigenschaft.

HTML

html

<canvas width="550" height="500"></canvas>

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const baselinesAboveAlphabetic = [  "fontBoundingBoxAscent",  "actualBoundingBoxAscent",  "emHeightAscent",  "hangingBaseline",];const baselinesBelowAlphabetic = [  "ideographicBaseline",  "emHeightDescent",  "actualBoundingBoxDescent",  "fontBoundingBoxDescent",];const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];ctx.font = "25px serif";ctx.strokeStyle = "red";baselines.forEach((baseline, index) => {  const text = `Abcdefghijklmnop (${baseline})`;  const textMetrics = ctx.measureText(text);  const y = 50 + index * 50;  ctx.beginPath();  ctx.fillText(text, 0, y);  const baselineMetricValue = textMetrics[baseline];  if (baselineMetricValue === undefined) {    return;  }  const lineY = baselinesBelowAlphabetic.includes(baseline)    ? y + Math.abs(baselineMetricValue)    : y - Math.abs(baselineMetricValue);  ctx.moveTo(0, lineY);  ctx.lineTo(550, lineY);  ctx.stroke();});

Ergebnis

Beim Messen der x-Richtung eines Textstücks kann die Summe vonactualBoundingBoxLeft undactualBoundingBoxRight breiter als die Breite des Inline-Kastens (width) sein, aufgrund schräger/italischer Schriften, bei denen Zeichen über ihre Fortschrittsbreite hinausragen.

Es kann daher nützlich sein, die Summe vonactualBoundingBoxLeft undactualBoundingBoxRight als genauere Methode zu verwenden, um die absolute Textbreite zu erhalten:

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const text = "Abcdefghijklmnop";ctx.font = "italic 50px serif";const textMetrics = ctx.measureText(text);console.log(textMetrics.width);// 459.8833312988281console.log(  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,);// 462.8833333333333