Indholdsfortegnelse
Grundlæggende er alle figurer lavet af linjer og kurver, i mange tilfælde kan vi simulere kurver ved hjælp af meget korte linjer og i stort antal, men dette er meget komplekst og involverer ekstraordinært arbejde, HTML5 og dens praktiske tilbyder os Arc metode Med hvilke vi kan udvikle buede linjer og på en eller anden måde kunne supplere vores tegninger.Arc metode
Som vi nævnte i begyndelsen, giver denne metode os mulighed for at generere buede linjer inden i elementet lærred uden større kompleksitet, uden at det er nødvendigt at indføre komplekse matematiske formler, som det kan være nødvendigt at gøre i nogle programmeringssprog.
Inden vi ser, hvordan denne metode fungerer, skal vi kende dens egenskaber og egenskaber, vi vil se dem nedenfor i følgende liste:
- bue (x, y, rad, startangle, endangle, retning): Denne metode tegner en kurve ved koordinaterne (x, y) med en radius rad, startvinklen er indledende vinkel og enden af vinklen er vinkel Finale. Vi har en valgfri parameter, som er adresse og angiver den retning, som kurven tegnet af metoden vil tage.
- arcTo (x1, y1, x2, y2, rad): Denne metode giver os mulighed for at tegne en kurve til koordinaterne (x2, y2), der passerer koordinaterne (x1, y1) og har en radius rad.
Som vi kan se, har vi to grundlæggende metoder, der giver os alt det nødvendige for at kunne tegne de buede linjer i vores lærredselement, lad os nu se en lille kode, så vi kan demonstrere, hvordan vi kan omsætte det, vi lige har set:
Eksempel Din browser understøtter ikke lærred element Vi har lavet den buede linje i eksemplet ved hjælp af metoden arcTo () at vi tidligere havde beskrevet, for at tegne denne kurve er vi afhængige af to linjer, den første trækkes fra slutningen af den sidste delsti til det punkt, der er beskrevet af de to første metodeargumenter, og den anden linje trækkes fra det punkt, der er beskrevet af de to første argumenter til det punkt, der er beskrevet af det tredje og fjerde argument.
Endelig tegnes kurven som den korteste linje mellem den sidste delsti og det andet punkt, der beskriver en kurve af en cirkel med radius angivet af det sidste argument, så vi kan se, hvad vi mener, koden indeholder nogle linjer med reference i rødt. Lad os se nedenfor et billede af, hvordan dette ser ud i vores browser:
