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.

Der Text wird mit dem aktuellen fillStyle gefüllt.

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

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

draw();

Der Text wird mit dem aktuellen strokeStyle umrandet.

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

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

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.

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

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

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

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.

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

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.

• Zurück
• Weiter