Indholdsfortegnelse
At tegne kurver på et lærred kan være enkelt eller komplekst, det afhænger helt af, hvad du vil opnå, du kan lave nogle interessante effekter, som vi kunne bruge til at bygge nogle funktioner på vores side, som skiller sig ud fra resten af de sider, der er lavet i HTML5.En af de ting, vi kan gøre, er at give en avanceret håndtering til oprettelsen af buede linjer, med denne type værktøjer vil vi være tættere på ikke at have begrænsninger, når vi tænker på, hvad vores side kan.
Tegn en kurve, når du flytter musen
Denne sag er ganske interessant, da det vi gør er at tegne en kurve, når vi flytter musen, og hvis vi også trykker på en vilkårlig tast på vores tastatur, ændres nogle punkter i kurven.
For eksempel, hvis vi trykker på ctrl -tasten, er det første punkt, der repræsenterer slutningen af delsti, hvis vi trykker på shift -tasten, flyttes det andet punkt, som er metodens to første argumenter arcTo () og endelig, hvis vi ikke trykker på nogen tast, flyttes det tredje punkt, der er repræsenteret ved de to sidste argumenter for metoden.
Lad os se nedenfor den kode, som vi opnår disse effekter med:
Eksempel Din browser understøtter ikke elementet lærred Som vi kan se, definerer vi først i koden håndtereren af modtagelsen af hændelser for de taster, vi trykker på, i den etablerer vi de værdier, der skal tages.
Lad os se nedenfor et skærmbillede af, hvordan dette kan resultere i vores browser, det er vigtigt at nævne, at da de er dynamiske, kan resultaterne variere, når vi gengiver dette eksempel:
Tidligere havde vi kun brugt metoden arcTo ()Nu vil vi se, hvordan buen () -metoden fungerer, dens håndtering er lettere, da vi angiver et punkt på lærredet gennem de to første argumenter og derefter kurvens radius og vinkel.
Lad os se følgende eksempel på, hvordan man tegner tre typer kurver med denne metode:
Eksempel Din browser understøtter ikke elementet lærred Lad os nu se, hvordan dette ser ud i vores browser:
