Innholdsfortegnelse
I utgangspunktet er alle figurer laget av linjer og kurver, i mange tilfeller kan vi simulere kurver ved å bruke veldig korte linjer og i store tall, men dette er veldig komplekst og innebærer eksepsjonelt arbeid, HTML5 og dens praktiske tilby oss Bue metode Med hvilke vi kan utvikle buede linjer og på en eller annen måte kunne utfylle tegningene våre.Bue metode
Som vi nevnte i begynnelsen, lar denne metoden oss å generere buede linjer i elementet lerret uten større kompleksitet, uten behov for å introdusere komplekse matematiske formler som kan være nødvendig å gjøre i noen programmeringsspråk.
Før vi ser hvordan denne metoden fungerer, må vi kjenne dens egenskaper og egenskaper, vi vil se dem nedenfor i følgende liste:
- bue (x, y, rad, startangle, endangle, retning): Denne metoden tegner en kurve ved koordinatene (x, y) med en radius rad, startvinkelen er innledende vinkel og enden av vinkelen er vinkel Finale. Vi har en valgfri parameter som er adresse og spesifiserer retningen som kurven tegnet av metoden vil ta.
- arcTo (x1, y1, x2, y2, rad): Denne metoden lar oss tegne en kurve til koordinatene (x2, y2) som passerer koordinatene (x1, y1) og har en radius rad.
Som vi kan se har vi to grunnleggende metoder som tillater oss alt som er nødvendig for å kunne tegne de buede linjene i vår lerret element, la oss nå se en liten kode, slik at vi kan demonstrere hvordan vi kan praktisere det vi nettopp har sett:
Eksempel Nettleseren din støtter ikke lerret element Vi har laget den buede linjen i eksemplet ved hjelp av metoden arcTo () som vi tidligere hadde beskrevet, for å tegne denne kurven er vi avhengige av to linjer, den første trekkes fra slutten av den siste delbanen til punktet beskrevet av de to første metodeargumentene og den andre linjen trekkes fra punktet beskrevet av de to første argumentene til det punktet beskrevet av det tredje og fjerde argumentet.
Til slutt tegnes kurven som den korteste linjen mellom den siste delbanen og det andre punktet som beskriver en kurve av en sirkel med radius spesifisert av det siste argumentet, slik at vi kan se hva vi mener, koden inneholder noen linjer med referanse i rødt. La oss se nedenfor et bilde av hvordan dette ser ut i nettleseren vår:
