Testo HTML su tela
Disegno di testo sulla tela
Per disegnare del testo su una tela, le proprietà e i metodi più importanti sono:
- font - definisce le proprietà del font per il testo
- fillText( text,x,y ) - disegna il testo "riempito" sulla tela
- strokeText( text,x,y ) - disegna il testo sulla tela (nessun riempimento)
Usando fillText()
Esempio
Imposta il carattere su 30px "Arial" e scrivi un testo pieno sulla tela:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Utilizzo di strokeText()
Esempio
Imposta il carattere su 30px "Arial" e scrivi un testo, senza riempimento, sulla tela:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Aggiungi colore e centra il testo
Esempio
Imposta il carattere su 30px "Comic Sans MS" e scrivi un testo rosso pieno al centro della tela:
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);