CanvasRenderingContext2D: strokeText() 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 strokeText()
der CanvasRenderingContext2D
, Teil der Canvas 2D API, zeichnet die Umrisse der Zeichen einer Textzeichenfolge an den angegebenen Koordinaten. Ein optionaler Parameter ermöglicht es, eine maximale Breite für den gerenderten Text anzugeben, die der User Agent durch Textverdichtung oder durch die Verwendung einer kleineren Schriftgröße erreicht.
Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern, sodass nachfolgende Aufrufe von fill()
oder stroke()
keine Wirkung darauf haben.
Hinweis: Verwenden Sie die Methode fillText()
, um die Textzeichen zu füllen, anstatt nur deren Umrisse zu zeichnen.
Syntax
strokeText(text, x, y)
strokeText(text, x, y, maxWidth)
Parameter
text
-
Eine Zeichenfolge, die den zu rendernden Text im Kontext angibt. Der Text wird unter Verwendung der in
font
,textAlign
,textBaseline
unddirection
angegebenen Einstellungen gerendert. x
-
Die x-Achsen-Koordinate des Punktes, an dem mit dem Zeichnen des Textes begonnen wird.
y
-
Die y-Achsen-Koordinate des Punktes, an dem mit dem Zeichnen des Textes begonnen wird.
maxWidth
Optional-
Die maximale Breite, die der Text nach dem Rendern haben darf. Wenn sie nicht angegeben ist, gibt es keine Begrenzung für die Breite des Textes. Falls dieser Wert angegeben wird, passt der User Agent das Kerning an, wählt eine horizontal komprimiertere Schriftart (falls verfügbar oder ohne Qualitätsverlust generierbar) oder verkleinert die Schriftgröße, um den Text in die angegebene Breite einzupassen.
Rückgabewert
Keine (undefined
).
Beispiele
Zeichnen von Textumrissen
In diesem Beispiel wird der Text "Hello world" mit der Methode strokeText()
geschrieben.
HTML
Zuerst benötigen wir eine Leinwand zum 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.strokeText("Hello world", 50, 90);
Dieser Code erhält eine Referenz zum <canvas>
, dann eine Referenz zu seinem 2D-Grafikkontext.
Damit in der Hand setzen wir das font
auf 50 Pixel hohe "serif" (die Standard-Serifenschrift des Benutzers), dann rufen wir strokeText()
auf, um den Text "Hello world" zu zeichnen, beginnend bei den Koordinaten (50, 90).
Ergebnis
Einschränkung 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.strokeText("Hello world", 50, 90, 140);
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-stroketext-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Zeichnen von Text
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillText()