Metodi e Proprietà Javascript per disegnare testo canvas

0
62

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: normalitalic 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.font = “italic 28px Verdana”‘;
context.fillText(frase, x, y);

 

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

su


 

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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

su


 

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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

su


 

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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

su


 

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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

<script>
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.

su


 

lineWidth

La proprietà lineWidth, definisce lo spessore in pixel del tratto usato con strokeText().

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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>

 

su


 

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: startendleftright 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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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.

su


 

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: topbottommiddlealphabetic, 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.

<canvas id=”wl” width=”250″ height=”150″ style=”border: 1px solid #000;”>
Il tuo browser non supporta canvas di html5
</canvas>
<script>
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

su


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.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteMetodi e Proprietà Javascript per disegnare immagini canvas
Prossimo articoloConclusioni
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here