Canvas-Text

Mit dem HTML5-Canvas kann Text unter Verwendung der unten aufgeführten verschiedenen Schrift- und Texteigenschaften erstellt werden:

Eigenschaften und Methoden

Eigenschaft / Methode	Beschreibung
font	Gibt die aktuellen Schrift-Einstellungen zurück und kann festgelegt werden, um die Schrift zu ändern.
textAlign	Gibt die aktuellen Einstellungen für die Textausrichtung zurück und kann festgelegt werden, um die Ausrichtung zu ändern. Die Eigenschaft kann folgende Werte annehmen: start, end, left, right und center. Beachten Sie, dass start und end von der Textrichtung abhängen.
textBaseline	Gibt die aktuellen Einstellungen für die Baseline-Ausrichtung zurück und kann festgelegt werden, um diese zu ändern. Die Eigenschaft kann folgende Werte annehmen: top, hanging, middle, alphabetic, ideographic und bottom.
fillStyle	Legt die Farbe fest, die zum Füllen des Textes verwendet wird.
strokeStyle	Legt die Farbe fest, die zum Umranden des Textes verwendet wird.
fillText(text, x, y)	Zeichnet einen gefüllten Text an der durch die angegebenen Koordinaten x und y angegebenen Position.
strokeText(text, x, y)	Umrandet den Text an der durch die angegebenen Koordinaten x und y angegebenen Position.

Beispiel zur fillText()-Methode:

Beispiel zur fillText()-Methode

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Try it Yourself »

Beispiel zur strokeText()-Methode:

Beispiel zur strokeText()-Methode

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Try it Yourself »

Beispiel zum Hinzufügen von Farbe und Zentrieren des Textes:

Beispiel zum Hinzufügen von Farbe und Zentrieren des Textes

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Try it Yourself »

Praxis

Welche Funktionalität hat die HTML5-Canvas-Methode 'fillText()' im Zusammenhang mit Text?

Sie gibt den Text nur an den angegebenen Koordinaten aus.Sie misst die Breite des angegebenen Textes.Sie gibt den Text an den angegebenen Koordinaten aus und füllt ihn mit dem aktuellen fillStyle.Sie gibt den Text an den angegebenen Koordinaten aus, ohne Textfüllung.Sie bewirkt, dass der Text vom Canvas verschwindet.

Canvas-Text ​

Eigenschaften und Methoden ​

Beispiel zur fillText()-Methode: ​

Beispiel zur strokeText()-Methode: ​

Beispiel zum Hinzufügen von Farbe und Zentrieren des Textes: ​

Praxis ​

Canvas-Text

Eigenschaften und Methoden

Beispiel zur fillText()-Methode:

Beispiel zur strokeText()-Methode:

Beispiel zum Hinzufügen von Farbe und Zentrieren des Textes:

Praxis