Il sito per imparare gratuitamente a fare pagine Web

canvas testo HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

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 lezione sul 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.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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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>


Il tuo browser non supporta canvas di html5

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

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


Il tuo browser non supporta canvas di html5

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.


Il tuo browser non supporta canvas di html5

Dal punto centrale usando end In quel punto deve finire.

Il tuo browser non supporta canvas di html5

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

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


Il tuo browser non supporta canvas di html5

Nell'esempio sopra usando allineamento top.


Il tuo browser non supporta canvas di html5

Dal punto centrale usando bottom

Il tuo browser non supporta canvas di html5

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.

Forum di web-link


Andrea Bianchi