TextMetrics

TextMetrics.width Schreibgeschützt

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

TextMetrics.actualBoundingBoxLeft Schreibgeschützt

Abstand parallel zur Grundlinie vom Ausrichtungspunkt, der durch die CanvasRenderingContext2D.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.actualBoundingBoxRight Schreibgeschützt

Gibt den Abstand vom Ausrichtungspunkt, der durch die CanvasRenderingContext2D.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.fontBoundingBoxAscent Schreibgeschützt

Gibt den Abstand von der horizontalen Linie, die durch das CanvasRenderingContext2D.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.fontBoundingBoxDescent Schreibgeschützt

Gibt den Abstand von der horizontalen Linie, die durch das CanvasRenderingContext2D.textBaseline-Attribut angezeigt wird, zur Unterseite des Begrenzungsrechtecks aller Schriften zurück, die verwendet werden, um den Text zu rendern, in CSS-Pixeln.

TextMetrics.actualBoundingBoxAscent Schreibgeschützt

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

TextMetrics.actualBoundingBoxDescent Schreibgeschützt

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

TextMetrics.emHeightAscent Schreibgeschützt

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

TextMetrics.emHeightDescent Schreibgeschützt

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

TextMetrics.hangingBaseline Schreibgeschützt

Gibt den Abstand von der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur hängenden Grundlinie des Linienkastens zurück, in CSS-Pixeln.

TextMetrics.alphabeticBaseline Schreibgeschützt

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

TextMetrics.ideographicBaseline Schreibgeschützt

Gibt den Abstand von der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline-Eigenschaft angezeigt wird, zur ideografischen Grundlinie des Linienkastens zurück, in CSS-Pixeln.

Dieses Beispiel zeigt 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 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 von actualBoundingBoxLeft und actualBoundingBoxRight 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.8833312988281

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

• Erstellermethode in CanvasRenderingContext2D
• Das <canvas>-Element und sein zugehöriges Interface, HTMLCanvasElement