Cuprins
Desenarea curbelor pe o pânză poate fi simplă sau complexă, totul depinde de ceea ce doriți să realizați, puteți face câteva efecte interesante, pe care le-am putea folosi pentru a construi unele funcționalități pe pagina noastră, care se remarcă de restul paginilor realizate în HTML5.Unul dintre lucrurile pe care le putem face este să oferim o manipulare avansată la crearea liniilor curbe, cu acest tip de instrumente vom fi mai aproape de a nu avea limitări atunci când ne gândim la ceea ce poate face pagina noastră.
Desenați o curbă atunci când mutați mouse-ul
Acest caz este destul de interesant, deoarece ceea ce facem este să trasăm o curbă atunci când mișcăm mouse-ul, în plus, dacă apăsăm orice tastă de pe tastatura noastră, se schimbă anumite puncte ale curbei.
De exemplu, dacă apăsăm tasta ctrl, primul punct care reprezintă sfârșitul sub-cale, dacă apăsăm tasta Shift, se va deplasa al doilea punct, care sunt primele două argumente ale metodei arcTo () și, în cele din urmă, dacă nu apăsăm nici o tastă, al treilea punct reprezentat de ultimele două argumente ale metodei se va deplasa.
Să vedem mai jos codul cu care obținem aceste efecte:
Exemplu Browserul dvs. nu acceptă elementul pânză După cum putem vedea, mai întâi în cod definim gestionarul recepției evenimentelor tastelor pe care le apăsăm, în acesta stabilim valorile care trebuie luate.
Să vedem mai jos o captură de ecran a modului în care acest lucru ar putea duce la browserul nostru, este important să menționăm că, dinamic, rezultatele pot varia atunci când reproducem acest exemplu:
Anterior, folosisem doar metoda arcTo ()Acum vom vedea cum funcționează metoda arc (), gestionarea sa este mai ușoară, deoarece specificăm un punct pe pânză prin primele două argumente și apoi raza și unghiul curbei.
Să vedem următorul exemplu despre cum să desenați trei tipuri de curbe cu această metodă:
Exemplu Browserul dvs. nu acceptă elementul pânză Să vedem acum cum arată acest lucru în browserul nostru:
