Text zeichnen

Text zeichnen

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

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

Füllt einen gegebenen Text an der angegebenen (x,y)-Position. Optional mit einer maximalen Breite.

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

Zeichnet einen Umriss eines gegebenen Textes an der angegebenen (x,y)-Position. Optional mit einer maximalen Breite.

Ein fillText Beispiel

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 strokeText Beispiel

Der Text wird mit dem aktuellen strokeStyle gefüllt.

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 stylen

In den obigen Beispielen verwenden wir bereits die font Eigenschaft, um den Text etwas größer als die Standardgröße darzustellen. Es gibt noch weitere Eigenschaften, mit denen Sie die Darstellung des Textes auf dem Canvas anpassen können:

font = value

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

textAlign = value

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

textBaseline = value

Baseline-Ausrichtung. 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önnen 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 demonstriert die verschiedenen Werte der textBaseline Eigenschaft. Weitere Informationen und detaillierte 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

Falls Sie mehr Details über den Text benötigen, ermöglicht es 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.

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

• Zurück
• Weiter