TextMetrics
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das TextMetrics
-Interface repräsentiert die Dimensionen eines Textstücks auf dem canvas
; eine TextMetrics
-Instanz kann mit der Methode CanvasRenderingContext2D.measureText()
abgerufen werden.
Instanz-Eigenschaften
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.
Beispiele
Veranschaulichung der Grundlinien
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
Messen der Textbreite
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
Spezifikationen
Specification |
---|
HTML # textmetrics |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
Siehe auch
- Erstellermethode in
CanvasRenderingContext2D
- Das
<canvas>
-Element und sein zugehöriges Interface,HTMLCanvasElement