Last 10 Posts [ In reverse order ]

1. flexlex
   Posted 31/10/2012, 23:18

   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
   

   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

   
   
   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

   c.strokeStyle="red"
   c.strokeStyle="hsl(0,100%,50%)"
   c.strokeStyle="hsla(0,100%,50%,1)"
   c.strokeStyle="rgb(255,0,0)"
   c.strokeStyle="rgba(255,0,0,1)"
   c.strokeStyle="#FF0000"
   c.strokeStyle="#F00"

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

   
   
   
   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

Review the complete topic (launches new window)