HTML5 - Curve di Bezier

Il Curve di Bezier, Sono un tipo di curve ampiamente utilizzate nei programmi di disegno e grafica poiché ci consentono di generare curve con alcuni punti nel piano, grazie a ciò con alcune formule matematiche possiamo ottenere curve lisce o più esatte, che possiamo usare per dare maggiori dettagli ai nostri grafici.
Nel HTML5 abbiamo la possibilità di implementare il Curve di Bezier Grazie a vari metodi, possiamo includere curve quadratiche e cubiche, il limite è che sulla tela non abbiamo un supporto visivo di dove abbiamo i punti di riferimento.
Metodi per generare le curve
Come abbiamo già spiegato, le curve di Bezier sono supportate su alcuni punti per poter fare il disegno, per ottenere la curva desiderata dobbiamo fare molti esperimenti, tuttavia per sperimentare dobbiamo prima conoscere lo sfondo, quindi dopo vedremo le informazioni corrispondenti con i metodi che ci permettono di disegnare queste curve:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Disegna una curva di Bezier di tipo cubico in cui i punti (x, y) si incontrano utilizzando i punti di controllo (cx1, cy1) e (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Disegna una curva di Bezier quadratica sui punti (x, y) con il punto di controllo (cx, cy).
Conosciamo già l'aspetto tecnico con cui dobbiamo lavorare, ora vedremo un esempio nel codice.
In questo esempio disegneremo una curva di Bezier cubica, dove prenderemo l'ultima come punto di partenza sotto-percorso e poi portalo ai punti degli ultimi due argomenti che il metodo riceve, inoltre include una funzionalità che se premiamo il tasto shift o ctrl sulla nostra tastiera, i punti di inizio e fine della curva cambiano.

 Esempio Il tuo browser non supporta l'elemento tela 

Una volta che abbiamo il codice, vediamo cosa genera nel browser, limitiamo che poiché contiene una sezione dinamica, i risultati possono variare:

Se osserviamo abbiamo i quattro punti di controllo contrassegnati dalle linee rosse che vediamo nello screenshot.
Con questo finiamo questo tutorial sulle curve di Bezier, la chiave è la sperimentazione se vogliamo ottenere effetti più complessi che siano collegati a ciò di cui abbiamo bisogno.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo