Facciamo una lista e procediamo con ordine
- Retangoli con bordi arrotondati
- Cerchi
- Riempire (fill)
- Clear
- importare immagine
- Introduzione a "Canvas (Advanced)"
Innanzitutto ben ritrovati
Finalmente continuo un pò con le guide
Sono sicuro che in questo piccolo periodo di inattività vi siete esercitati
tantissimo con i canvas e sapete le basi
Se non è così vi conviene leggere questa
Guida prima che vi becco :|
Detto questo iniziamo con:
Rettangoli con bordi arrotondatiRagazzi... adesso diventa tosto davvero... ma vero, davvero.
Ci serviremo della Funzione
arcTo.
Forse qualche spiegazione su come funziona.
abbiamo 3 punti.
P1(0,0); P2(100,0); P3(0,100);
Quindi abbiamo 90 gradi.
Sintassi:
CODICE
P1=moveTo(x,y);
arcTo(P2[x],P2[y],P3[x],P3[y],Border-Radius);
ecco qui il codice:
CODICE
c.beginPath();
c.moveTo(10,10);
c.arcTo(100,10,100,100,40);
c.lineTo(100,100);
c.stroke();
c.closePath();
praticamente il Punto "P1" è già predifinito dal punto dove finisce l'ultima linea, oppure dove è stato posizionato il punto con "moveTo".
il punto "P2" è dove si trova l'angolo (fino a qui uguale a "lineTo").
Il punto "P3" si trova dove la linea deve continuare. se le cordinate x di P2 e P3 sono uguali abbiamo un Angolo di 90º.
Poi il "Border-Radius" indica quanto viene "mangiato" dalla linea originale per creare l'angolo arrotondato.
Arrotondando tutti gli angoli e mantenendo la relatività ai punti x1 e y1 come nella funzione "strokeRect" oppure "fillRect" otteniamo una funzione che si usa esattamente come quest'ultime.
CODICE
function rRect(x1,y1,x2,y2,r)
{
c.beginPath();
c.moveTo(x1+r,y1);
c.arcTo(x1+x2,y1,x1+x2,y1+y2,r);
c.arcTo(x1+x2,y1+y2,x1,y1+y2,r);
c.arcTo(x1,y1+y2,x1,y1,r);
c.arcTo(x1,y1,x1+x2,y1,r);
c.stroke();
c.closePath();
}
il moveTo(
x1+r) è fatto di proposito, altrimenti la linea inizia più a sinistra di dove l'angolo arrotondato finisce alla fine del tracciato.
Cerchi perfettiContinua
