HTML Canvas text

Rita text på canvas

De viktigaste egenskaperna och metoderna för att rita text på canvas är:

• font - Definiera textens teckenegenskaper
• fillText(text,x,y) - Rita "fyllt" text på canvas
• strokeText(text,x,y) - Rita text på canvas (inte fyllt)

Använd fillText()

Exempel

Ställ in tecknet till "30px Arial" och skriv ut fyllt text på canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hej Världen", 10, 50);

Prova det själv

Använd strokeText()

Exempel

Ställ in tecknet till "30px Arial" och skriv ut text på canvas (inte fyllt):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hej Världen", 10, 50);

Prova det själv

Lägg till färg och centrera text

Exempel

Ställ in tecknet till "30px Comic Sans MS" och skriv ut rödfärgad text i mitten av canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "röd";
ctx.textAlign = "center";
ctx.fillText("Hej Världen", canvas.width/2, canvas.height/2);

Prova det själv

Se också:

Komplett Canvas referenshandbok på CodeW3C.com