HTML5 - Avansert lerret

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.

Når vi vet hvilke verktøy vi har for å bruke lerretet, må vi kjenne rekkefølgen på flyten som vi kan lage en tegning med, denne rekkefølgen er som følger:
• 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:

Med dette fullfører vi opplæringen, ikke bare ved å kjenne de forskjellige metodene og tilleggsverktøyene vi kan bruke, men vi fremhever også at de ikke lenger bare er rektangulære former som vi kan tegne.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng