HTML Canvas tekst

Tegner tekst på canvas

De vigtigste egenskaber og metoder til at tegne tekst på canvas er:

• font - Definerer teksts skriftattributter
• fillText(text,x,y) - Tegner "fyldt" tekst på canvasen
• strokeText(text,x,y) - Tegner tekst på canvasen (uden fyld)

Brug fillText()

Eksempel

Sæt skriften til "30px Arial" og skriv teksten på canvasen med fyld:

JavaScript:

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

Prøv det selv

Brug strokeText()

Eksempel

Sæt skriften til "30px Arial" og skriv teksten på canvasen (uden fyld):

JavaScript:

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

Prøv det selv

Tilføj farve og centrer teksten

Eksempel

Sæt skriften til "30px Comic Sans MS" og skriv teksten rød i midten af canvasen:

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);

Prøv det selv

Se også:

CodeW3C.com's fulde Canvas reference manual