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 zum Zeichnen.

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

Zeichnet die Konturen eines gegebenen Textes an der angegebenen (x,y)-Position. Optional mit einer maximalen Breite zum Zeichnen.

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();

Textgestaltung

In den obigen Beispielen verwenden wir bereits die font-Eigenschaft, um den Text etwas größer als die Standardgröße zu machen. Es gibt noch weitere Eigenschaften, die es Ihnen ermöglichen, die Anzeigeweise des Textes auf der Leinwand anzupassen:

font = value

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

textAlign = value

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

textBaseline = value

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

direction = value

Direktionalität. 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 den HTML-Spezifikationen zeigt die verschiedenen Baselines, die von der textBaseline-Eigenschaft unterstützt werden.

Ein textBaseline-Beispiel

Dieses Beispiel zeigt die verschiedenen Werte der textBaseline-Eigenschaft. 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 Textmessung

Falls Sie mehr Details über den Text benötigen, ermöglicht Ihnen die folgende Methode, ihn zu messen.

measureText()

Gibt ein TextMetrics-Objekt zurück, das die Breite in Pixel angibt, die der angegebene Text hat, wenn er im aktuellen Textstil gezeichnet wird.

Das folgende Code-Snippet zeigt, wie Sie einen Text messen und seine Breite erhalten 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