Sommario
Ci sono diversi tipi di effetti e trasformazioni che può essere applicato su tela, questo permette di generare immagini che prima si potevano immaginare solo in flash e altri strumenti simili.Tra questi effetti abbiamo la creazione di ombre che ci permette di dare un rilievo ai disegni che incorporiamo nel nostro telaCi sono anche effetti di trasparenza, che ci permettono di sovrapporre un elemento all'altro, generando infinite probabilità di progettazione.
sfumature
Le ombre ci permettono di dare un effetto di profondità e rilievo ai nostri elementi, sulla tela possiamo incorporare queste ombre agli elementi, per questo abbiamo le seguenti proprietà che ci permettono di personalizzarle a seconda di cosa vogliamo ottenere con loro:
- Sfocatura ombra: Imposta il grado di nitidezza dell'ombra su un valore più alto, minore nitidezza e maggiore dispersione.
- ombraColore: Consente di impostare il colore dell'ombra.
- ombraOffsetX: Imposta il punto di uscita orizzontale dell'ombra.
- ombraOffsetY: Imposta il punto di rilascio verticale dell'ombra.
Esempio Il tuo browser non supporta l'elemento tela In questo esempio applichiamo le ombre a un rettangolo così come il testo e una curva, vediamo come appare nel browser:
Per stabilire la trasparenza abbiamo due modi, il primo è usare il funzione rgba negli attributi fillStyle sì stile del tratto; il secondo modo che abbiamo è usare la proprietà di disegno globaleAlpha che si applica universalmente.
Vediamo di seguito un esempio utilizzando la seconda forma che è la più semplice e diretta da applicare, evidenziamo che i valori che accetta globaleAlpha sono 0 per la massima trasparenza sì 1 per renderlo totalmente opaco, nel caso dell'esempio utilizzeremo 0.5 come valore che ci permette una via di mezzo:
Esempio Il tuo browser non supporta l'elemento tela Come possiamo vedere, quello che abbiamo fatto è stato disegnare un rettangolo sul testo e grazie a globaleAlpha vediamo l'effetto di trasparenza che ci permette di apprezzare le due figure disegnate:
