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

js
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 und direction 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.

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

JavaScript

Der JavaScript-Code für dieses Beispiel folgt.

js
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

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

JavaScript

js
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