HTML5 - Canvas, folosind Arc

Cuprins
Practic toate figurile sunt formate din linii și curbe, în multe cazuri putem simula curbe folosind linii foarte scurte și în număr mare, totuși acest lucru este foarte complex și implică o muncă excepțională, HTML5 iar caracterul său practic ne oferă Metoda arcului Cu ajutorul cărora putem dezvolta linii curbe și într-un fel putem să ne completăm desenele.
Metoda arcului
După cum am menționat la început, această metodă ne permite să generăm linii curbe în interiorul elementului pânză fără o complexitate mai mare, fără necesitatea introducerii unor formule matematice complexe, așa cum ar trebui să se facă în unele limbaje de programare.
Înainte de a vedea cum funcționează această metodă, trebuie să îi cunoaștem caracteristicile și proprietățile, le vom vedea mai jos în următoarea listă:
  • arc (x, y, rad, startangle, endangle, direction): Această metodă trasează o curbă la coordonatele (x, y) cu o rază rad, unghiul de plecare este unghiul inițial iar capătul unghiului este unghiFinal. Avem un parametru opțional care este abordare și specifică direcția pe care o va lua curba trasată de metodă.
  • arcTo (x1, y1, x2, y2, rad): Această metodă ne permite să trasăm o curbă la coordonatele (x2, y2) care trec coordonatele (x1, y1) și au o rază rad.

După cum putem vedea, avem două metode de bază care ne permit tot ceea ce este necesar pentru a putea trasa liniile curbe în element de panza, acum să vedem un mic cod, astfel încât să putem demonstra cum să punem în practică ceea ce tocmai am văzut:
 Exemplu Browserul dvs. nu acceptă pânză element 

Am făcut linia curbată în exemplu folosind metoda arcTo () pe care l-am descris anterior, pentru a desena această curbă depindem de două linii, prima este trasă de la sfârșitul ultimei căi secundare până la punctul descris de primele două argumente ale metodei și a doua linie este trasată de la punctul descris de primele două argumente până la punctul descris de al treilea și al patrulea argument.
În cele din urmă, curba este trasată ca cea mai scurtă linie dintre ultima sub-cale și al doilea punct care descrie o curbă a unui cerc cu raza specificată de ultimul argument, astfel încât să putem vedea la ce ne referim, codul încorporează câteva linii de referință în roșu. Să vedem mai jos o imagine a aspectului în browserul nostru:

Odată operațiunea de Arc Pentru a desena linii curbe, putem încheia acest tutorial, avem deja un nou instrument care ne va permite să extragem mai mult din elementul pânză și, prin urmare, să-i extindem funcționalitatea mult mai mult.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
wave wave wave wave wave