HTML5 - Curbele Bezier

Curbele Bezier, Acestea sunt un tip de curbe utilizate pe scară largă în programele de desen și grafică, deoarece ne permit să generăm curbe cu unele puncte în plan, datorită acestui fapt, cu unele formule matematice, putem realiza curbe netede sau mai exacte, pe care le putem folosi pentru a le da vă oferim mai multe detalii în diagramele noastre.
În HTML5 avem posibilitatea să implementăm Curbele Bezier Datorită diferitelor metode, putem include curbe pătratice și cubice, limitarea este că pe pânză nu avem un suport vizual al locului în care avem punctele de referință.
Metode de generare a curbelor
Așa cum am explicat deja, curbele Bezier sunt sprijinite pe unele puncte pentru a putea realiza desenul, pentru a realiza curba dorită trebuie să facem multe experimente, totuși pentru a experimenta trebuie să cunoaștem mai întâi fundalul, așa că în continuare vom vedea informațiile corespunzătoare cu metodele care ne permit să trasăm aceste curbe:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Desenați o curbă Bezier de tip cub în care punctele (x, y) se întâlnesc folosind punctele de control (cx1, cy1) și (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Desenați o curbă Bezier pătratică către punctele (x, y) cu punctul de control (cx, cy).
Știm deja aspectul tehnic cu care trebuie să lucrăm, acum vom vedea un exemplu în cod.
În acest exemplu, vom desena o curbă Bezier cubică, unde vom lua ultima ca punct de plecare sub-cale și apoi duceți-l la punctele din ultimele două argumente pe care le primește metoda, în plus, include o funcționalitate care, dacă apăsăm tasta Shift sau Ctrl de pe tastatură, se schimbă punctele de început și de sfârșit ale curbei.

 Exemplu Browserul dvs. nu acceptă elementul pânză 

Odată ce avem codul, să vedem ce generează în browser, limităm că, deoarece conține o secțiune dinamică, rezultatele pot varia:

Dacă ne uităm, avem cele patru puncte de control marcate de liniile roșii pe care le vedem în captura de ecran.
Cu aceasta încheiem acest tutorial pe curbele Bezier, cheia este experimentarea dacă vrem să obținem efecte mai complexe care sunt atașate la ceea ce avem nevoie.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv