Il web si e' evoluto, oggi le pagine web non si limitano piu' alla sola lettura dei testi, ma sono diventati molto dinamici. Ricche di immagini, animazioni, grafici, video e musichette... aspettate, grafici!?.
ma i grafici non sono delle immagini con delle informazioni facilmente interpretabili? Esattamente.
Ma non abbiamo bisogno di photoshop, GIMP o Paint per fare queste cose?
Con HTML5 e CSS3 possiamo iniziare a mettere da parte tutti questi evolutissimi programmi per creare gradienti, bordi arrotondati, ombre, testi e adesso anche grafici.
Non abbiate paura di utilizzare questi "fogli di disegno", perche da IE9 sono supportati senza problema da tutti i browser (almeno le basi, ovvero il "2D", per WebGL e 3D, dovremmo attendere)
basta chiacchiere e passiamo all' azione:
creiamo subito la base:
Preparativi HTML
fino ad adesso nulla di complicato spero:
canvas = tag
id = per prendere l'elemento con javascript
width = larghezza in pixel
height = altezza in pixel
Preparativi JS:
perche salvare il contesto in una variabile cosi corta? beh, perche dovremmo usarla spesso....
adesso vi insegno:
Scegliere un colore per le linee
beh, i colori possiamo definirli come meglio crediamo: hsl, hsla, rgb, rgba, esadecimale, nome;
quindi per una linea rossa possiamo fare cosi
basta usare uno di questi 7 metodi.
Scegliere il colore per superfici
quasi uguale solo che il metodo "strokeStyle" viene sostituito con "fillStyle"
Disegnare una linea
I canvas funzionano a coordinate, quindi il punto: P(0,0) corrisponde al angolo in alto a sinistra, e il punto Q(can.width,can.height) all' angolo in basso a destra.
(can.width significa "larghezza del foglio")
adesso disegnamo una liena dall angolo alto a sinistra, all'angolo in basso a destra.
Wow, il codice e' abbastanza lungo, quindi ripssiamo insieme, usando il principio della matita
c.beginPath(): preparati ad iniziare a tracciare (prendi la matita)
c.moveTo(): posiziona la matita (appoggiamo la matita sul foglio)
c.lineTo(): traccia fino a .... (sposta la matita fino alle coordinate date, senza alzare la matita)
c.stroke() colora il tracciato (rendi visibile il tracciato, fino ad ora solo immaginato)
c.closePath() finisce qui il tracciato (riponi la matita)
c.stroke() e' fondamentale, senza di questo, non potremmo vedere le linee
Disgnare un retangolo
ci servono solo due coordinate
Angolo alto a sinistra e angolo basso a destra
il codice e' di nuovo facile.
cosi facciamo un quadrato equilatero dalla coordinata (0,0) alla (50,50)
i primi due parametri sono le coordinate d'inizio, mentre gli ultimi due sono punti dove finisce.
Attenzione: le ultime coordinate, vanno relative a quelle precedenti.
Cosa significa?
che le seconde coordinate, partono dalle prime
fanno un rettangolo che ha come prima coordinata:
(25,25) come e' giusto che sia
(75,75) perché vengono sommati anche le coordinate precedenti.
Un altro esempio cosi sono sicuro che capiscono tutti XD
in realtà disegniamo un rettangolo che si comporta cosi:
coordinata 1: (17,8)
coordinata 2: (93+17,100+8)
coordinate 2 sommata: (110,108)
Nelle prossime guide vedremo altre funzioni, queste sono le basi delle basi
ci sono funzioni simili tipo:
c.fill()
c.strokeRect()
e poi alcune totalmente sconosciute come
c.arcTo()
Alla prossima, se avete domande, chiedete pure qui
ma i grafici non sono delle immagini con delle informazioni facilmente interpretabili? Esattamente.
Ma non abbiamo bisogno di photoshop, GIMP o Paint per fare queste cose?
Con HTML5 e CSS3 possiamo iniziare a mettere da parte tutti questi evolutissimi programmi per creare gradienti, bordi arrotondati, ombre, testi e adesso anche grafici.
Non abbiate paura di utilizzare questi "fogli di disegno", perche da IE9 sono supportati senza problema da tutti i browser (almeno le basi, ovvero il "2D", per WebGL e 3D, dovremmo attendere)
basta chiacchiere e passiamo all' azione:
creiamo subito la base:
Preparativi HTML
HTML
<canvas id="foglio" width="500" height="350"></canvas>
fino ad adesso nulla di complicato spero:
canvas = tag
id = per prendere l'elemento con javascript
width = larghezza in pixel
height = altezza in pixel
Preparativi JS:
HTML
can=document.getElemenById("foglio"); //salvare il foglio in una variabile
c=can.getContext("2d"); //salvare il "contesto" in una variabile
c=can.getContext("2d"); //salvare il "contesto" in una variabile
perche salvare il contesto in una variabile cosi corta? beh, perche dovremmo usarla spesso....
adesso vi insegno:
- scegliere il colore delle linee
- scegliere il colore delle superfici
- disegnare una linea
- disegnare un retangolo
Scegliere un colore per le linee
beh, i colori possiamo definirli come meglio crediamo: hsl, hsla, rgb, rgba, esadecimale, nome;
quindi per una linea rossa possiamo fare cosi
CODICE
basta usare uno di questi 7 metodi.
Scegliere il colore per superfici
quasi uguale solo che il metodo "strokeStyle" viene sostituito con "fillStyle"
CODICE
c.fillStyle="blue"
Disegnare una linea
I canvas funzionano a coordinate, quindi il punto: P(0,0) corrisponde al angolo in alto a sinistra, e il punto Q(can.width,can.height) all' angolo in basso a destra.
(can.width significa "larghezza del foglio")
adesso disegnamo una liena dall angolo alto a sinistra, all'angolo in basso a destra.
CODICE
c.beginPath()
c.moveTo(0,0)
c.lineTo(can.width,can.width)
c.stroke()
c.closePath()
c.moveTo(0,0)
c.lineTo(can.width,can.width)
c.stroke()
c.closePath()
Wow, il codice e' abbastanza lungo, quindi ripssiamo insieme, usando il principio della matita
c.beginPath(): preparati ad iniziare a tracciare (prendi la matita)
c.moveTo(): posiziona la matita (appoggiamo la matita sul foglio)
c.lineTo(): traccia fino a .... (sposta la matita fino alle coordinate date, senza alzare la matita)
c.stroke() colora il tracciato (rendi visibile il tracciato, fino ad ora solo immaginato)
c.closePath() finisce qui il tracciato (riponi la matita)
c.stroke() e' fondamentale, senza di questo, non potremmo vedere le linee
Disgnare un retangolo
ci servono solo due coordinate
Angolo alto a sinistra e angolo basso a destra
il codice e' di nuovo facile.
CODICE
c.fillRect(0,0,50,50)
cosi facciamo un quadrato equilatero dalla coordinata (0,0) alla (50,50)
i primi due parametri sono le coordinate d'inizio, mentre gli ultimi due sono punti dove finisce.
Attenzione: le ultime coordinate, vanno relative a quelle precedenti.
Cosa significa?
che le seconde coordinate, partono dalle prime
CODICE
c.fillRect(25,25,50,50)
fanno un rettangolo che ha come prima coordinata:
(25,25) come e' giusto che sia
(75,75) perché vengono sommati anche le coordinate precedenti.
Un altro esempio cosi sono sicuro che capiscono tutti XD
CODICE
c.fillRect(17,8,93,100)
in realtà disegniamo un rettangolo che si comporta cosi:
coordinata 1: (17,8)
coordinata 2: (93+17,100+8)
coordinate 2 sommata: (110,108)
Nelle prossime guide vedremo altre funzioni, queste sono le basi delle basi
ci sono funzioni simili tipo:
c.fill()
c.strokeRect()
e poi alcune totalmente sconosciute come
c.arcTo()
Alla prossima, se avete domande, chiedete pure qui
.