Zeichnen von Text - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Zeichnen von Text

Nachdem Sie im vorherigen Kapitel gesehen haben, wie man Stile und Farben anwendet, werden wir nun betrachten, wie man Text auf die Leinwand zeichnet.

In diesem Artikel

Zeichnen von Text

Der Canvas-Rendering-Kontext bietet zwei Methoden, um Text darzustellen:

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

Füllt einen gegebenen Text an der angegebenen Position (x,y). Optional kann eine maximale Breite angegeben werden.

strokeText(text, x, y [, maxWidth])

Umrandet einen gegebenen Text an der angegebenen Position (x,y). Optional kann eine maximale Breite angegeben werden.

Ein fillText-Beispiel

Der Text wird mit dem aktuellen fillStyle gefüllt.

js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

draw();

Ein strokeText-Beispiel

Der Text wird mit dem aktuellen strokeStyle umrandet.

js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

draw();

In den obigen Beispielen verwenden wir bereits die font-Eigenschaft, um den Text etwas größer als die Standardgröße darzustellen. Es gibt noch einige weitere Eigenschaften, die es Ihnen ermöglichen, die Art und Weise, wie der Text auf der Leinwand dargestellt wird, anzupassen:

font = value

Der aktuelle Textstil, der beim Zeichnen des Textes verwendet wird. Dieser String verwendet die gleiche Syntax wie die CSS font Eigenschaft. Die Standardschriftart ist 10px sans-serif.

textAlign = value

Einstellung der Textausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standardwert ist start.

textBaseline = value

Einstellung der Basislinienausrichtung. Mögliche Werte: top, hanging, middle, alphabetic, ideographic, bottom. Der Standardwert ist alphabetic.

direction = value

Richtung. Mögliche Werte: ltr, rtl, inherit. Der Standardwert ist inherit.

Diese Eigenschaften könnten Ihnen bekannt vorkommen, wenn Sie zuvor mit CSS gearbeitet haben.

Das folgende Diagramm aus der HTML-Spezifikation zeigt die verschiedenen von der textBaseline-Eigenschaft unterstützten Baselines.

Ein textBaseline-Beispiel

Dieses Beispiel zeigt die verschiedenen textBaseline-Eigenschaftswerte. Besuchen Sie die Seite CanvasRenderingContext2D.textBaseline für weitere Informationen und detaillierte Beispiele.

js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";

  ctx.textBaseline = "hanging";
  ctx.strokeText("hanging", 10, 50);

  ctx.textBaseline = "middle";
  ctx.strokeText("middle", 250, 50);

  ctx.beginPath();
  ctx.moveTo(10, 50);
  ctx.lineTo(300, 50);
  ctx.stroke();
}

draw();

Erweiterte Textmessungen

Für den Fall, dass Sie mehr Details über den Text benötigen, erlaubt Ihnen die folgende Methode, ihn zu messen.

measureText()

Gibt ein TextMetrics-Objekt zurück, das die Breite in Pixeln enthält, die der angegebene Text haben wird, wenn er im aktuellen Textstil gezeichnet wird.

Der folgende Codeausschnitt zeigt, wie Sie einen Text messen und seine Breite erhalten können.

js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");
  const text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

Barrierefreiheitsaspekte

Das <canvas>-Element ist nur ein Bitmap und liefert keine Informationen über irgendwelche gezeichneten Objekte. Text, der auf einem Canvas geschrieben wird, kann Lesbarkeitsprobleme für Benutzer verursachen, die auf Bildschirmvergrößerung angewiesen sind. Die Pixel innerhalb eines Canvas-Elements werden nicht skaliert und können bei Vergrößerung unscharf werden. Dies liegt daran, dass sie kein Vektor, sondern eine buchstabenförmige Ansammlung von Pixeln sind. Bei Vergrößerung werden die Pixel größer.

Canvas-Inhalt wird nicht wie semantisches HTML an Barrierefreiheitstools weitergegeben. Im Allgemeinen sollten Sie die Verwendung von Canvas in einer barrierefreien Website oder App vermeiden. Eine Alternative ist die Verwendung von HTML-Elementen oder SVG anstelle von Canvas.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Zeichnen von Text

In diesem Artikel

Zeichnen von Text

Ein fillText-Beispiel

Ein strokeText-Beispiel

Styling von Text

Ein textBaseline-Beispiel

Erweiterte Textmessungen

Barrierefreiheitsaspekte

Help improve MDN