[HTML5, Canvas] Text zeichnen

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 29.01.2013 Zuletzt aktualisiert am 03.05.2013 Geschrieben von Jonny132
Um in ein Canvas einen Text zeichnen zu können, müssen wir zuerst ein solchiges Canvas-Objekt erstellen.
Dieses können wir im Nachhinein dann mittels einer Scriptsprache (JavaScript) bearbeiten.

Text in ein Canvas-Objekt zeichnen:
<canvas id="meinTextCanvas" width="300" height="300">
</canvas>
<script>
var e = document.getElementById("meinTextCanvas");
var canv = e.getContext("2d");
canv.font="50px Arial";
canv.fillStyle = "green";
canv.fillText("tuts4you",50,150);
</script>
HTML5 Canvas Text mit Farbe

Im Codebeispiel wird zuerst ein Canvas mit der ID 'meinTextCanvas' erstellt. Dies ist wichtig, denn somit können wir im Nachhinein mittels JavaScript und der getElementById-Funktion darauf zugreiffen.

Um auf dem Canvas zeichen zu können benötigen wir den sogenannten Context des Canvas-Objektes. Dieses bekommen wir mittels getContext-Funktion.
Dieser Funktion müssen wir zusätzlich immer als Parameter den Wert '2d' übergeben.

Nun können wir Eigenschaften dieses Contextes setzen, wie z.B. im Codebeispiel ersichtlich Font + Farbe.
Dazu ist anzumerken, dass die fillStyle-Eigenschaft auch nur auf die fill-Funktionen greifft.

Abschliessend wird die Funktion fillText() aufgerufen, welche als Parameter, den Text und die XY Koordinaten übernimmt.


Nicht gefüllter Text in ein Canvas einfügen:
<script>
var e=document.getElementById("meinTextCanvas");
var canv=e.getContext("2d");
canv.font="50px Arial";
canv.strokeStyle = "green";
canv.strokeText("tuts4you",50,150);
</script>
Canvas mit nicht gefülltem Text
Wie Ihr seht kann für einen nicht gefüllten Text die strokeText-Funktion verwendet werden. Um die Farbe zu setzten kann die dazugehörige strokeStyle-Eigenschaft gesetzt werden.

    Veröffentlichen Sie ihre Kommentare ...