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 Juli 2015.
Die Methode strokeText() des CanvasRenderingContext2D, Teil der Canvas 2D API, zeichnet die Umrisse der Zeichen eines Textstrings an den angegebenen Koordinaten. Ein optionaler Parameter ermöglicht es, eine maximale Breite für den gerenderten Text festzulegen, die der User-Agent durch Verkleinern oder durch die Verwendung einer kleineren Schriftgröße erreichen kann.
Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern. Deshalb haben nachfolgende Aufrufe von fill() oder stroke() keinen Einfluss darauf.
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-
Ein String, der die zu rendernde Textzeichenfolge im Kontext angibt. Der Text wird mit den in
font,textAlign,textBaselineunddirectionangegebenen Einstellungen gerendert. x-
Die x-Achsen-Koordinate des Punktes, an dem das Zeichnen des Textes beginnen soll.
y-
Die y-Achsen-Koordinate des Punktes, an dem das Zeichnen des Textes beginnen soll.
maxWidthOptional-
Die maximale Breite, die der Text bei der Darstellung einnehmen darf. Wenn nicht angegeben, gibt es keine Begrenzung der Textbreite. Ist dieser Wert jedoch angegeben, passt der User-Agent das Kerning an, wählt eine mehr horizontal kondensierte Schrift (wenn eine verfügbar ist oder ohne Qualitätsverlust generiert werden kann) oder verkleinert die Schriftgröße, um den Text in die angegebene Breite zu passen.
Rückgabewert
Keiner (undefined).
Beispiele
Zeichnen von Textumrissen
Dieses Beispiel schreibt die Worte "Hello world" mit der Methode strokeText().
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 einen Verweis auf das <canvas>, dann erhält er einen Verweis auf seinen 2D-Grafikkontext.
Mit diesem in der Hand setzen wir die font auf "serif" in 50 Pixel Höhe (die Standard-Serifen-Schrift des Nutzers), 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 die 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 # dom-context-2d-stroketext-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Zeichnen von Text
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.fillText()