Sommario
Fondamentalmente tutte le figure sono fatte di linee e curve, in molti casi possiamo simulare curve usando linee molto corte e in grandi numeri, tuttavia questo è molto complesso e comporta un lavoro eccezionale, HTML5 e la sua praticità ci offrono il Metodo dell'arco Con cui possiamo sviluppare linee curve e in qualche modo essere in grado di completare i nostri disegni.Metodo dell'arco
Come accennato all'inizio, questo metodo ci consente di generare linee curve all'interno dell'elemento tela senza maggiore complessità, senza la necessità di introdurre formule matematiche complesse come potrebbe essere necessario fare in alcuni linguaggi di programmazione.
Prima di vedere come funziona questo metodo, dobbiamo conoscerne le caratteristiche e le proprietà, le vedremo di seguito nel seguente elenco:
- arco (x, y, rad, startangle, endangle, direzione): Questo metodo disegna una curva alle coordinate (x, y) con un raggio radi, l'angolo di partenza è angolo iniziale e la fine dell'angolo è angolo Finale. Abbiamo un parametro opzionale che è indirizzo e specifica la direzione che prenderà la curva disegnata dal metodo.
- arcTo (x1, y1, x2, y2, rad): Questo metodo ci permette di disegnare una curva alle coordinate (x2, y2) che passano le coordinate (x1, y1) e ha un raggio rad.
Come possiamo vedere abbiamo due metodi di base che ci permettono tutto il necessario per poter disegnare le linee curve nel nostro elemento tela, ora vediamo un piccolo codice in modo da poter dimostrare come mettere in pratica quanto appena visto:
Esempio Il tuo browser non supporta il tela elemento Abbiamo realizzato la linea curva nell'esempio utilizzando il metodo arcoTo() che avevamo descritto in precedenza, per tracciare questa curva dipendiamo da due linee, la prima è tracciata dalla fine dell'ultimo sottopercorso al punto descritto dai primi due argomenti del metodo e la seconda linea è tracciata dal punto descritto da i primi due argomenti al punto descritto dal terzo e dal quarto argomento.
Infine la curva viene disegnata come la linea più corta tra l'ultimo sottotracciato e il secondo punto che descrive una curva di un cerchio con il raggio specificato dall'ultimo argomento, in modo che possiamo vedere cosa intendiamo, il codice incorpora alcune linee di riferimento in rosso. Vediamo di seguito un'immagine di come appare nel nostro browser:
