Text zeichnen

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

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

Füllt einen angegebenen Text an der angegebenen Position (x, y). Optional mit einer maximalen Breite, die gezeichnet werden soll.

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

Zeichnet den Umriss eines angegebenen Textes an der angegebenen Position (x, y). Optional mit einer maximalen Breite, die gezeichnet werden soll.

Der Text wird mit der 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 der aktuellen strokeStyle gezeichnet.

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 Eigenschaft font, um den Text etwas größer als die Standardgröße darzustellen. Es gibt noch weitere Eigenschaften, mit denen Sie die Darstellung des Textes auf der Canvas anpassen können:

font = value

Der aktuelle Textstil, der beim Zeichnen des Textes verwendet wird. Dieser String verwendet die gleiche Syntax wie die CSS font-Eigenschaft. Die Standard-Schriftart 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 Grundlinie. 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 bereits mit CSS gearbeitet haben.

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

Bearbeiten Sie den Code unten und sehen Sie, wie Ihre Änderungen live auf der Canvas aktualisiert werden:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
</textarea>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Falls Sie mehr Details über den Text benötigen, bietet die folgende Methode die Möglichkeit, ihn zu messen.

measureText()

Gibt ein TextMetrics-Objekt zurück, das die Breite des angegebenen Textes in Pixeln enthält, wenn dieser im aktuellen Textstil gerendert wird.

Der folgende Code-Ausschnitt zeigt, wie Sie einen Text messen und seine Breite abrufen 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 eine Bitmap und stellt keine Informationen zu den gezeichneten Objekten bereit. Text, der auf Canvas geschrieben wird, kann Lesbarkeitsprobleme für Benutzer verursachen, die auf Bildschirmvergrößerung angewiesen sind. Die Pixel innerhalb eines Canvas-Elements skalieren nicht und können bei Vergrößerung unscharf werden. Das liegt daran, dass sie kein Vektor sind, sondern eine buchstabenförmige Ansammlung von Pixeln. Bei der Vergrößerung werden die Pixel größer.

Canvas-Inhalte werden nicht wie semantisches HTML an Barrierefreiheitstools weitergegeben. Im Allgemeinen sollten Sie die Verwendung von Canvas in einer zugänglichen Website oder App vermeiden. Eine Alternative besteht darin, statt Canvas HTML-Elemente oder SVG zu verwenden.

• Zurück
• Weiter