Innholdsfortegnelse
Å tegne kurver på et lerret kan være enkelt eller komplekst, alt avhenger av hva du vil oppnå, du kan lage noen interessante effekter, som vi kan bruke til å bygge noen funksjoner på siden vår, som skiller seg ut fra resten av sidene som er laget i HTML5.En av tingene vi kan gjøre er å gi en avansert håndtering til opprettelsen av buede linjer, med denne typen verktøy vil vi være nærmere å ikke ha begrensninger når vi tenker på hva siden vår kan gjøre.
Tegn en kurve når du flytter musen
Denne saken er ganske interessant siden det vi gjør er å tegne en kurve når du flytter musen, i tillegg hvis vi trykker på en tast på tastaturet, endres noen punkter i kurven.
For eksempel, hvis vi trykker på ctrl -tasten, er det første punktet som representerer slutten av delsti, hvis vi trykker på shift -tasten, flyttes det andre punktet, som er de to første argumentene for metoden arcTo () og til slutt, hvis vi ikke trykker på noen tast, vil det tredje punktet som er representert med de to siste argumentene i metoden bevege seg.
La oss se nedenfor koden som vi oppnår disse effektene med:
Eksempel Din nettleser støtter ikke elementet lerret Som vi kan se, først i koden definerer vi behandleren for mottak av hendelser for tastene vi trykker på, i den etablerer vi verdiene som må tas.
La oss se nedenfor et skjermbilde av hvordan dette kan resultere i nettleseren vår. Det er viktig å nevne at resultatene som er dynamiske kan variere når du gjengir dette eksemplet:
Tidligere hadde vi bare brukt metoden arcTo ()Nå skal vi se hvordan buen () -metoden fungerer, håndteringen er lettere, siden vi spesifiserer et punkt på lerretet gjennom de to første argumentene og deretter radius og vinkel på kurven.
La oss se følgende eksempel på hvordan du tegner tre typer kurver med denne metoden:
Eksempel Din nettleser støtter ikke elementet lerret La oss nå se hvordan dette ser ut i nettleseren vår:
