Sommario
Disegnare curve su una tela può essere semplice o complesso, tutto dipende da cosa si vuole ottenere, si possono realizzare degli effetti interessanti, che potremmo utilizzare per costruire alcune funzionalità sulla nostra pagina, che si distinguano dal resto delle pagine realizzate in HTML5.Una delle cose che possiamo fare è dare una gestione avanzata alla creazione di linee curve, con questo tipo di strumenti saremo più vicini a non avere limitazioni quando pensiamo a cosa può fare la nostra pagina.
Disegna una curva quando muovi il mouse
Questo caso è piuttosto interessante poiché quello che facciamo è disegnare una curva quando muoviamo il mouse, inoltre se premiamo un tasto qualsiasi sulla nostra tastiera alcuni punti della curva cambiano.
Ad esempio, se premiamo il tasto ctrl, il primo punto che rappresenta la fine del sotto-percorso, se premiamo il tasto shift, si sposterà il secondo punto, che sono i primi due argomenti del metodo arcoTo() e infine, se non si preme alcun tasto, si sposterà il terzo punto rappresentato dagli ultimi due argomenti del metodo.
Vediamo di seguito il codice con cui otteniamo questi effetti:
Esempio Il tuo browser non supporta l'elemento tela Come possiamo vedere, prima nel codice definiamo il gestore della ricezione degli eventi dei tasti che premiamo, in esso stabiliamo i valori che devono essere presi.
Vediamo di seguito uno screenshot di come ciò potrebbe risultare nel nostro browser, è importante ricordare che essendo dinamici i risultati possono variare durante la riproduzione di questo esempio:
In precedenza, avevamo utilizzato solo il metodo arcoTo()Ora vedremo come funziona il metodo arc(), la sua gestione è più semplice, poiché specifichiamo un punto sulla tela attraverso i primi due argomenti e poi il raggio e l'angolo della curva.
Vediamo il seguente esempio di come disegnare tre tipi di curve con questo metodo:
Esempio Il tuo browser non supporta l'elemento tela Vediamo ora come appare nel nostro browser:
