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