HTML-Canvas- Text
Zeichnen von Text auf der Leinwand
Die wichtigsten Eigenschaften und Methoden zum Zeichnen von Text auf einer Leinwand sind:
- font - definiert die Schriftarteigenschaften für den Text
- fillText( text,x,y ) - zeichnet "gefüllten" Text auf die Leinwand
- strokeText( text,x,y ) - zeichnet Text auf die Leinwand (keine Füllung)
Mit fillText()
Beispiel
Stellen Sie die Schriftart auf 30px "Arial" ein und schreiben Sie einen gefüllten Text auf die Leinwand:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
StrokeText() verwenden
Beispiel
Stellen Sie die Schriftart auf 30 Pixel "Arial" ein und schreiben Sie einen Text ohne Füllung auf die Leinwand:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Farbe hinzufügen und Text zentrieren
Beispiel
Stellen Sie die Schriftart auf 30 Pixel "Comic Sans MS" ein und schreiben Sie einen gefüllten roten Text in die Mitte der Leinwand:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);