Cuprins
Când utilizați elementul pânză pentru a desena nu suntem limitați la desenarea figurilor dreptunghiulare, putem desena și folosind coordonate și așa-numitele cărări care sunt căi prin care vom indica elementul pânză unde și cum să ne arătăm desenul.Posibilitățile pe care ni le oferă acest lucru sunt impresionante, deoarece cu algoritmii necesari putem face compoziții nelimitate, desenăm orice tip de figură în HTML5 și împreună cu acesta până la obținerea, împreună cu alte elemente, a unor rezultate niciodată imaginate în specificațiile anterioare ale limbajului.
Folosind Calea
După cum am menționat cale este ceea ce ne va permite să indicăm pânzei coordonatele prin care ar trebui realizat desenul, cu aceste coordonate pânza va fi în măsură să știe unde să traseze liniile corespunzătoare și, în cele din urmă, cu acumularea corectă de linii putem realiza orice tipul figurii.
Înainte de a trece la exemplele corespunzătoare, trebuie să știm ce metode sunt disponibile pentru elementul pânză și cale, să vedem următoarea listă:
- beginPath (): Această metodă ne permite să începem o nouă cale.
- closePath (): Această metodă încearcă să închidă calea curentă trasând o linie de la sfârșitul ultimei linii la coordonatele inițiale.
- completati (): Completați formularele descrise de căile secundare.
- isPointInPath (x, y): Returnează adevărat dacă punctul specificat este cuprins în forma desenată de calea curentă.
- lineTo (x, y): Desenați o cale secundară la coordonatele specificate.
- moveTo (x, y): Ne permite să ne deplasăm la coordonatele specificate fără a fi nevoie să desenăm o sub-cale.
- rect (x, y, w, h): Desenați un dreptunghi ale cărui coordonate din colțul din stânga sus corespund (x, y) lățimea acestuia corespunde w și înălțimea acestuia corespunde h.
- accident vascular cerebral (): Desenați liniile exterioare ale formelor desenate de sub-cale.
• Numim metoda beginPath.
• Trecem la poziția inițială folosind metoda mutaTo.
• Desenăm căile secundare cu metodele lineTo, etc.
• Opțional, putem apela metoda closePath.
• În cele din urmă numim metode completati sau stoke.
Avem deja comanda recomandată pentru a începe desenarea acum vedem codul corespunzător în HTML5.
Exemplu Browserul dvs. nu acceptă elementul pânză După cum putem vedea, se fac două apeluri către beginPath(), cu aceasta putem începe zonele de desen pe pânză apoi cu moveTo () stabilim pozițiile inițiale, iar restul este să desenăm.
Să vedem cum arată desenul nostru în browser:
