Innholdsfortegnelse
Når du bruker varen lerret for å tegne er vi ikke begrenset til å tegne rektangulære figurer, vi kan også tegne ved hjelp av koordinater og den såkalte stier som er stier som vi vil indikere elementet på lerret hvor og hvordan vi skal vise vår tegning.Mulighetene dette gir oss er imponerende, for med de nødvendige algoritmene kan vi lage ubegrensede komposisjoner, tegne hvilken som helst figur i HTML5 og med det inntil oppnåelse i forbindelse med andre elementer resultater som aldri var forestilt i tidligere spesifikasjoner for språket.
Bruker Path
Som vi nevnte sti er det som vil tillate oss å indikere for lerretet koordinatene som tegningen skal lages med. Med disse koordinatene vil lerretet kunne vite hvor vi skal tegne de tilsvarende linjene og til slutt med riktig akkumulering av linjer kan vi oppnå noen type figur.
Før vi går videre til de tilsvarende eksemplene, må vi vite hvilke metoder som er tilgjengelige for lerretelementet og banen, la oss se følgende liste:
- beginPath (): Denne metoden lar oss starte en ny vei.
- closePath (): Denne metoden prøver å lukke den nåværende banen ved å tegne en linje fra slutten av den siste linjen til de første koordinatene.
- fylle (): Fyll ut skjemaene beskrevet av delbanene.
- isPointInPath (x, y): Returnerer true hvis det angitte punktet er inneholdt i formen som er tegnet av den gjeldende banen.
- lineTo (x, y): Tegn en underbane ved de angitte koordinatene.
- moveTo (x, y): Det lar oss flytte til de angitte koordinatene uten å måtte tegne en underbane.
- rett (x, y, w, h): Tegn et rektangel hvis koordinater i øvre venstre hjørne tilsvarer (x, y) bredden tilsvarer w og høyden tilsvarer h.
- slag (): Tegn de ytre linjene i figurene tegnet av underbanen.
• Vi kaller metoden beginPath.
• Vi går til utgangsposisjonen ved hjelp av metoden flytte til.
• Vi tegner delbanene med metodene lineTo, etc.
• Eventuelt kan vi kalle metoden closePath.
• Til slutt kaller vi metodene fylle eller stoke.
Vi har allerede den anbefalte ordren for å begynne å tegne nå ser vi den tilsvarende koden i HTML5.
Eksempel Din nettleser støtter ikke elementet lerret Som vi kan se, ringer vi to beginPath(), med dette kan vi starte tegneområdene på lerretet, så med moveTo () etablerer vi startposisjonene og resten er å tegne.
La oss se hvordan tegningen vår ser ut i nettleseren:
