Text zeichnen

Text zeichnen

Der Canvas-Rendering-Kontext stellt zwei Methoden zum Zeichnen von Text bereit:

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

Zeichnet den angegebenen Text gefüllt an der Position (x, y). Optional kann eine maximale Breite angegeben werden.

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

Zeichnet die Konturen des angegebenen Textes an der Position (x, y). Optional kann eine maximale Breite angegeben werden.

Ein Beispiel für fillText

Der Text wird mit dem aktuellen fillStyle gefüllt.

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

<canvas id="my-canvas" width="300" height="100"></canvas>

draw();

Ein Beispiel für strokeText

Die Textkonturen werden mit dem aktuellen strokeStyle gezeichnet.

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

<canvas id="my-canvas" width="300" height="100"></canvas>

draw();

Text gestalten

In den obigen Beispielen verwenden wir bereits die Eigenschaft font, um den Text etwas größer als die Standardgröße darzustellen. Mit weiteren Eigenschaften können Sie anpassen, wie der Text auf dem Canvas angezeigt wird:

font = value

Der aktuelle Textstil beim Zeichnen von Text. Diese Zeichenfolge verwendet dieselbe Syntax wie die CSS-Eigenschaft font. Die Standardschriftart ist 10px sans-serif.

textAlign = value

Einstellung für die Textausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standardwert ist start.

textBaseline = value

Einstellung für die Ausrichtung an der Grundlinie. Mögliche Werte: top, hanging, middle, alphabetic, ideographic, bottom. Der Standardwert ist alphabetic.

direction = value

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

Wenn Sie bereits mit CSS gearbeitet haben, kommen Ihnen diese Eigenschaften möglicherweise bekannt vor.

Das folgende Diagramm aus der HTML-Spezifikation zeigt die verschiedenen Grundlinien, die von der Eigenschaft textBaseline unterstützt werden.

Ein Beispiel für textBaseline

Dieses Beispiel zeigt die verschiedenen Werte der Eigenschaft textBaseline. Weitere Informationen und ausführliche Beispiele finden Sie auf der Seite CanvasRenderingContext2D.textBaseline.

<canvas id="my-canvas" width="400" height="100"></canvas>

function draw() {
  const ctx = document.getElementById("my-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

Wenn Sie genauere Angaben zu einem Text benötigen, können Sie ihn mit der folgenden Methode messen.

measureText()

Gibt ein TextMetrics-Objekt zurück, das unter anderem die Breite in Pixeln enthält, die der angegebene Text beim Zeichnen mit dem aktuellen Textstil hat.

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

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

• Zurück
• Weiter