TextMetrics

TextMetrics.width Nur lesbar

Gibt die Breite eines Segments von Inline-Text in CSS-Pixeln zurück. Es berücksichtigt die aktuelle Schriftart des Kontextes.

TextMetrics.actualBoundingBoxLeft Nur lesbar

Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch die CanvasRenderingContext2D.textAlign-Eigenschaft angegeben wird, zur linken Seite des Begrenzungsrechtecks des gegebenen Textes, in CSS-Pixeln; positive Zahlen zeigen einen Abstand nach links vom gegebenen Ausrichtungspunkt an.

TextMetrics.actualBoundingBoxRight Nur lesbar

Gibt den Abstand vom Ausrichtungspunkt, der durch die CanvasRenderingContext2D.textAlign-Eigenschaft angegeben wird, zur rechten Seite des Begrenzungsrechtecks des gegebenen Textes, in CSS-Pixeln zurück. Der Abstand wird parallel zur Grundlinie gemessen.

TextMetrics.fontBoundingBoxAscent Nur lesbar

Gibt den Abstand von der durch das CanvasRenderingContext2D.textBaseline-Attribut angegebenen horizontalen Linie zur Oberseite des höchsten Begrenzungsrechtecks aller Schriftarten, die verwendet werden, um den Text darzustellen, in CSS-Pixeln zurück.

TextMetrics.fontBoundingBoxDescent Nur lesbar

Gibt den Abstand von der durch das CanvasRenderingContext2D.textBaseline-Attribut angegebenen horizontalen Linie zur Unterseite des Begrenzungsrechtecks aller Schriftarten, die verwendet werden, um den Text darzustellen, in CSS-Pixeln zurück.

TextMetrics.actualBoundingBoxAscent Nur lesbar

Gibt den Abstand von der durch das CanvasRenderingContext2D.textBaseline-Attribut angegebenen horizontalen Linie zur Oberseite des Begrenzungsrechtecks, das verwendet wird, um den Text darzustellen, in CSS-Pixeln zurück.

TextMetrics.actualBoundingBoxDescent Nur lesbar

Gibt den Abstand von der durch das CanvasRenderingContext2D.textBaseline-Attribut angegebenen horizontalen Linie zur Unterseite des Begrenzungsrechtecks, das verwendet wird, um den Text darzustellen, in CSS-Pixeln zurück.

TextMetrics.emHeightAscent Nur lesbar

Gibt den Abstand von der durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angegebenen horizontalen Linie zur Oberseite des em-Quadrats im Zeilenkasten, in CSS-Pixeln zurück.

TextMetrics.emHeightDescent Nur lesbar

Gibt den Abstand von der durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angegebenen horizontalen Linie zur Unterseite des em-Quadrats im Zeilenkasten, in CSS-Pixeln zurück.

TextMetrics.hangingBaseline Nur lesbar

Gibt den Abstand von der durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angegebenen horizontalen Linie zur Hängelinie des Zeilenkastens, in CSS-Pixeln zurück.

TextMetrics.alphabeticBaseline Nur lesbar

Gibt den Abstand von der durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angegebenen horizontalen Linie zur alphabetischen Grundlinie des Zeilenkastens, in CSS-Pixeln zurück.

TextMetrics.ideographicBaseline Nur lesbar

Gibt den Abstand von der durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angegebenen horizontalen Linie zur ideographischen Grundlinie des Zeilenkastens, in CSS-Pixeln zurück.

Dieses Beispiel demonstriert die Grundlinien, die das TextMetrics-Objekt enthält. Die Standard-Grundlinie ist die alphabeticBaseline. Siehe auch die CanvasRenderingContext2D.textBaseline-Eigenschaft.

HTML

<canvas id="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 von actualBoundingBoxLeft und actualBoundingBoxRight breiter sein als die Breite des Inline-Blocks (width), aufgrund von geneigten/kursiven Schriftarten, bei denen Zeichen über ihre Breite hinausragen.

Es kann daher nützlich sein, die Summe von actualBoundingBoxLeft und actualBoundingBoxRight zu verwenden, um die absolute Textbreite genauer zu berechnen:

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.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

• Erzeugermethode in CanvasRenderingContext2D
• Das <canvas>-Element und seine zugehörige Schnittstelle, HTMLCanvasElement