HTML-Canvas-Text

Text auf dem Canvas zeichnen

Die wichtigsten Attribute und Methoden zum Zeichnen von Text auf dem Canvas sind:

• font - Definiert die Schriftart-Attribute des Textes
• fillText(text,x,y) - Zeichnen Sie "gefüllten" Text auf dem Canvas
• strokeText(text,x,y) - Zeichnen Sie Text auf dem Canvas (ohne Füllung)

Verwenden Sie fillText()

Beispiel

Setzen Sie die Schriftart auf "30px Arial" und schreiben Sie gefüllten Text auf dem Canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Probieren Sie es selbst aus

Verwenden Sie strokeText()

Beispiel

Setzen Sie die Schriftart auf "30px Arial" und schreiben Sie Text auf dem Canvas (ohne Füllung):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Probieren Sie es selbst aus

Fügen Sie Farbe und zentrierten Text hinzu

Beispiel

Setzen Sie die Schriftart auf "30px Comic Sans MS" und schreiben Sie rot gefüllten Text in die Mitte des Canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

Probieren Sie es selbst aus

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com