Sadržaj
Crtanje krivulja na platnu može biti jednostavno ili složeno, sve ovisi o tome što želite postići, možete napraviti neke zanimljive efekte, koje bismo mogli koristiti za izgradnju nekih funkcionalnosti na našoj stranici, koje se izdvajaju od ostalih napravljenih stranica u HTML5.Jedna od stvari koje možemo učiniti je napredno rukovanje stvaranjem zakrivljenih linija, s ovom vrstom alata bit ćemo bliže tome da nemamo ograničenja kada razmišljamo o tome što naša stranica može učiniti.
Nacrtajte krivulju pri pomicanju miša
Ovaj slučaj je vrlo zanimljiv jer mi crtamo krivulju pri pomicanju miša, dodatno ako pritisnemo bilo koju tipku na tipkovnici neke točke krivulje se promijene.
Na primjer, ako pritisnemo tipku ctrl, prva točka koja predstavlja kraj datoteke podputanja, ako pritisnemo tipku shift, pomaknut će se druga točka, koja su prva dva argumenta metode arcTo () i na kraju, ako ne pritisnemo nijednu tipku, pomaknut će se treća točka koju predstavljaju posljednja dva argumenta metode.
Pogledajmo dolje kod s kojim postižemo ove učinke:
Primjer Vaš preglednik ne podržava element platno
Kao što vidimo, prvo u kodu definiramo rukovatelj prijema događaja tipki koje pritisnemo, u njemu utvrđujemo vrijednosti koje se moraju uzeti.
Pogledajmo ispod snimku zaslona kako bi to moglo rezultirati u našem pregledniku, važno je napomenuti da se dinamički rezultati mogu razlikovati pri reprodukciji ovog primjera:
Korištenjem metode Arc
Ranije smo koristili samo ovu metodu arcTo ()Sada ćemo vidjeti kako metoda arc () funkcionira, njeno rukovanje je lakše, budući da određujemo točku na platnu kroz prva dva argumenta, a zatim radijus i kut krivulje.
Pogledajmo sljedeći primjer kako nacrtati tri vrste krivulja ovom metodom:
Primjer Vaš preglednik ne podržava element platno
Pogledajmo sada kako to izgleda u našem pregledniku:
Kao što vidimo prvi i drugi primjer su krugovi, jedan potpuni, a drugi s malim otvorom, s druge strane, treći krug je potpuno nepravilan i pokazuje nam svestranost metode arc ().Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod