Nella lezione introduttiva abbiamo visto che cosa è un canvas e quali sono le istruzioni javascript per poterlo gestire, adesso vediamo come fare per scrivere al suo interno del testo, dando per scontato che abbiate letto e compreso la lezionesul disegno delle forme.
font
La proprietà font serve per impostare gli attributi del testo, è possibile specificare lo style del font, la sua dimensione e la famiglia (tipo di font). Questi tre parametri vanno inseriti all’interno di virgolette e separati da uno spazio vuoto. Per style del font valgono: normal, italic e bold, se non si specifica nulla per default viene assunto il normal. Da solo serve a poco, si tratta di attributi letti dal metodo fillText() descritto sotto.
context.fillText(frase, x, y);
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 28px Verdana”;
context.fillText(“Web-Link”, 25, 50);
</script>
Ho scritto la parola Web-Link con stile italico usando il font verdana con dimensioni 28 pixel e l’ho posizionato nel canvas a 25px dal margine sinistro e 50 px dal margine superiore.
fillText(“testo” x, y)
Il metodo fillText() serve per scrivere nel canvas facendo uso della proprietà font e relativi parametri visti sopra. La frase o il testo devono essere racchiusi da virgolette, una virgola e le coordinate x, y per specificare la posizione esatta di inizio testo all’interno del canvas stesso.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 28px Verdana”;
context.fillText(“Web-Link”, 25, 50);
</script>
Ho scritto la parola Web-Link con stile italico usando il font verdana con dimensioni 28 pixel e l’ho posizionato nel canvas a 25px dal margine sinistro e 50 px dal margine superiore.
fillStyle
La proprietà fillStyle, già vista per il canvas forme, rappresenta il colore. Il valore predefinito è il nero, accetta valori come: il nome del colore, il valore in #esadecimale ed il valore in RGB racchiusi da doppie virgolette.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 28px Verdana”;
context.fillStyle=”#009900″;
context.fillText(“Web-Link”, 25, 50);
</script>
Ho scritto la parola Web-Link con stile italico usando il font verdana con dimensioni 28 pixel e l’ho posizionato nel canvas a 25px dal margine sinistro e 50 px dal margine superiore. Con fillStyle gli ho assegnato il colore verde.
strokeStyle
Come già visto per le forme è possibile impostare un colore per la penna che scrive (stroke). La proprietà strokeStyle ha come valore predefinito il nero, accetta valori come: il nome del colore, il codice in #esadecimale o il codice in RGB racchiusi da doppie virgolette. Questa proprietà necessita del metodo strokeText()descritto sotto.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 28px Verdana”;
context.strokeStyle=”#ff0000″;
context.strokeText(“Web-Link”, 25, 50);
</script>
Ho scritto la parola Web-Link con stile italico usando il font verdana con dimensioni 28 pixel e l’ho posizionato nel canvas a 25 px dal margine sinistro e 50 px dal margine superiore. Ho usato strokeText() per scrivere e selezionato il colore del tratto, rosso in questo esempio, con strokestyle.
strokeText()
Il metodo strokeText serve per scrivere testo nel canvas, un po’ quello che fa già fillText ma stroke mostra il tratto della penna, grazie alla proprietà strokeStyle vista sopra è possibile scegliere il colore del tratto. La frase, o il testo, devono essere racchiusi da virgolette, una virgola e le coordinate x, y per specificare la posizione esatta di inizio testo all’interno del canvas stesso.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 50px Verdana”;
context.strokeStyle=”#0000ff”;
context.strokeText(“Web-Link”, 25, 50);
</script>
Ho scritto la parola Web-Link con stile italico usando il font verdana con dimensioni 50 pixel ho scelto di ingrandire il font per meglio mostrare il suo bordo colorato e l’ho posizionato nel canvas a 25 px dal margine sinistro e 80 px dal margine superiore. Ho usato strokeText() ed impostato il colore azzurro con strokeStyle.
E’ possibile usare entrambi: strokeText e fillText, in questo caso fillText deve essere dichiarato prima di strokeText per evitare che il riempimento si sovrapponga al margine.
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 50px Verdana”;
context.fillStyle=”#ffff00″;
context.fillText(“Web-Link”, 5, 80);
context.strokeStyle=”#ff0000″;
context.strokeText(“Web-Link”, 5, 80);
</script>
Nell’esempio sopra ho riempito la scritta di giallo con fillStyle usato da FillText poi ho impostato il bordo in rosso con strokeStyle usato da strokeText. Avendo entrambi i metodi le stesse coordinate di posizionamento l’effetto di riempimento è assicurato.
lineWidth
La proprietà lineWidth, definisce lo spessore in pixel del tratto usato con strokeText().
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 48px Verdana”;
context.lineWidth=”3″;
context.strokeStyle=”#ff0000″;
context.strokeText(“Web-Link”, 5, 80);
</script>
textAllign
La proprietà textAlign, serve per allineare il testo nel canvas rispetto al punto dichiarato con x ed y di fillText() o strokeText() immaginando una linea verticale. I valori ammessi sono: start, end, left, right e center. rispettivamente per all’inizio, alla fine, a sinistra, a destra, centrato. E’ interessante vedere come il testo cambia punto di riferimento da sinistra verso destra e viceversa a seconda del valore adoperato.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 18px Verdana”;
context.textAlign = “center”;
context.fillStyle=”#009900″;
context.fillText(“Web-Link”, 125, 75);
</script>
Nell’esempio sopra ho usato un allineamento center ed ho inserito nelle coordinate x,y la metà esatta delle dimensioni del canvas definito, di conseguenza la scritta risulta perfettamente al centro.
Dal punto centrale usando end In quel punto deve finire.
Dal punto centrale usando start Da quel punto deve iniziare.
textBaseline
La proprietà textBaseline, serve per allineare il testo nel canvas rispetto al punto dichiarato con x ed y di fillText() o strokeText() immaginando una linea orizzontale. I valori ammessi sono: top, bottom, middle, alphabetic, rispettivamente per in alto, in basso, in mezzo. Per default viene assunto alphabetic. Ci sarebbero altri due valori: ideographic (simile a bottom) e hanging(simile a top) difficilmente adoperati.
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.font = “italic 18px Verdana”;
context.textBaseline = “top”;
context.fillStyle=”#009900″;
context.fillText(“Web-Link”, 125, 75);
</script>
Nell’esempio sopra usando allineamento top.
Dal punto centrale usando bottom
Dal punto centrale usando middle
Nell’ultima lezione alcune considerazioni e l’elenco dei tag che sono stati aboliti da HTML5
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.