CanvasRenderingContext2D: fillText() Methode

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.

Die Methode fillText() des CanvasRenderingContext2D, die Teil der Canvas 2D API ist, zeichnet einen Textstring an den angegebenen Koordinaten und füllt die Zeichen des Strings mit dem aktuellen fillStyle. Ein optionaler Parameter ermöglicht es, eine maximale Breite für den gerenderten Text anzugeben, die der User-Agent erreichen wird, indem er den Text verdichtet oder eine kleinere Schriftgröße verwendet.

Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern, sodass nachfolgende Aufrufe von fill() oder stroke() darauf keine Wirkung haben.

Der Text wird unter Verwendung der Schrift- und Textlayoutkonfiguration gerendert, wie sie durch die Eigenschaften font, textAlign, textBaseline und direction definiert sind.

Hinweis: Um die Umrisse der Zeichen in einem String zu zeichnen, rufen Sie die Methode strokeText() des Kontextes auf.

Syntax

fillText(text, x, y)
fillText(text, x, y, maxWidth)

Parameter

text: Ein String, der den zu rendernden Textstring im Kontext angibt. Der Text wird unter Verwendung der durch font, textAlign, textBaseline und direction spezifizierten Einstellungen gerendert.
x: Die x-Koordinate des Punktes, an dem das Zeichnen des Textes beginnen soll, in Pixeln.
y: Die y-Koordinate der Basislinie, an der das Zeichnen des Textes beginnen soll, in Pixeln.
maxWidth Optional: Die maximale Anzahl von Pixeln, die der Text bei der Darstellung breit sein darf. Wenn nicht angegeben, gibt es keine Begrenzung für die Breite des Textes. Wenn dieser Wert jedoch angegeben wird, wird der User-Agent das Kerning anpassen, eine stärker horizontal verdichtete Schriftart auswählen (falls verfügbar oder ohne Qualitätsverlust erzeugbar) oder die Schriftgröße verringern, um den Text in die angegebene Breite zu passen.

Rückgabewert

Keiner (undefined).

Beispiele

Zeichnen von gefülltem Text

Dieses Beispiel schreibt die Worte "Hello world" unter Verwendung der fillText()-Methode.

HTML

Zunächst benötigen wir eine Leinwand, um darauf zu zeichnen. Dieser Code erstellt einen Kontext, der 400 Pixel breit und 150 Pixel hoch ist.

html

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

Der JavaScript-Code für dieses Beispiel folgt.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);

Dieser Code erhält eine Referenz auf das <canvas>, dann eine Referenz auf seinen 2D-Grafikkontext.

Damit in der Hand setzen wir die font auf "serif" (das serifenbetonte Standardfont des Benutzers) mit 50 Pixel Höhe und rufen dann fillText() auf, um den Text "Hello world" zu zeichnen, beginnend bei den Koordinaten (50, 90).

Ergebnis

Einschränken der Textgröße

Dieses Beispiel schreibt die Worte "Hello world" und beschränkt deren Breite auf 140 Pixel.

HTML

html

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);

Ergebnis

Spezifikationen

Specification
HTML Standard # dom-context-2d-filltext-dev

Browser-Kompatibilität

BCD tables only load in the browser