Baseline Widely available *
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.
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.
<canvas id="canvas" width="550" height="500"></canvas>
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();
});
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
CanvasRenderingContext2D<canvas>-Element und sein zugehöriges Interface, HTMLCanvasElementRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4