Text zeichnen
Nachdem wir im vorherigen Kapitel gesehen haben, wie man Stile und Farben anwendet, schauen wir uns nun an, wie man Text auf die Canvas zeichnet.
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.
Ein Beispiel für fillText
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);
}
Ein Beispiel für strokeText
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);
}
Text stylen
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
odercenter
. Der Standardwert iststart
. textBaseline = value
-
Einstellung der Grundlinie. Mögliche Werte:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
. Der Standardwert istalphabetic
. direction = value
-
Richtung. Mögliche Werte:
ltr
,rtl
,inherit
. Der Standardwert istinherit
.
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.
Ein Beispiel für textBaseline
Bearbeiten Sie den Code unten und sehen Sie, wie Ihre Änderungen live auf der Canvas aktualisiert werden:
Erweiterte Textmessungen
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;
}
Barrierefreiheit bedenken
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.