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 den Umriss eines gegebenen Textes an der angegebenen (x,y)-Position. Optional mit einer maximalen Breite zum Zeichnen.

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 zu machen. Es gibt einige weitere Eigenschaften, die Ihnen ermöglichen, die Art und Weise anzupassen, wie der Text auf der Leinwand angezeigt wird:

font = value

Der aktuelle Textstil, der beim Zeichnen von Text 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 Grundlinienausrichtung. Mögliche Werte: top, hanging, middle, alphabetic, ideographic, bottom. Der Standardwert ist alphabetic.

direction = value

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

Diese Eigenschaften könnten Ihnen vertraut sein, wenn Sie zuvor mit CSS gearbeitet haben.

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

Bearbeiten Sie den untenstehenden Code und sehen Sie, wie sich Ihre Änderungen live auf der Leinwand aktualisieren:

<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, ermöglicht 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 ermitteln 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 lediglich ein Bitmap und liefert keine Informationen über gezeichnete Objekte. Text, der auf einer Leinwand geschrieben wird, kann Lesbarkeitsprobleme bei Nutzern verursachen, die auf Bildschirmvergrößerung angewiesen sind. Die Pixel innerhalb eines Canvas-Elements skalieren nicht und können bei Vergrößerung unscharf werden. Dies liegt daran, dass sie keine Vektoren 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 Barrierefreiheitswerkzeuge weitergegeben. Im Allgemeinen sollten Sie die Verwendung von Canvas in einer zugänglichen Website oder App vermeiden. Eine Alternative wäre, HTML-Elemente oder SVG anstelle von Canvas zu verwenden.

• Zurück
• Weiter