Innholdsfortegnelse
Med de forskjellige tegnemetodene sett i lerret Det er mulig å definere områder i dem å tegne, selv om dette er litt mer komplekst, er det helt gjennomførbart, men vi har også muligheten til å oppnå det samme resultatet ved hjelp av metoden klipp ().Et annet aspekt som også kan inkorporeres i lerret er teksttegningen, kanskje vi tror at ved hjelp av CSS og andre elementer kan vi tegne en tekst som er den samme eller penere, men er i lerret lar oss bruke native animasjoner i HTML5.
Klippemetode
Som vi nevnte i begynnelsen, forenkler denne metoden veien til hvordan kan vi lage en seksjon i et lerret, for å kunne introdusere andre tegnede elementer, for eksempel en ny tegning eller fylle den med en bestemt farge.
For å bruke dette verktøyet må vi kalle metoden klipp (), hva denne metoden gjør er å opprette en region av klipping eller en ny seksjon, la oss se i følgende kode hvordan det fungerer:
Eksempel Din nettleser støtter ikke elementet lerret I denne koden tegner vi først et stort rektangel i gult, så lager vi et nytt område i det ved hjelp av clip () metode og i denne regionen genererer vi et nytt rødt rektangel.
La oss se hvordan dette ser ut i nettleseren vår:
Vi kan også tegne tekst på et lerret, for dette har vi følgende metoder:
fillText (, x, y, bredde): Tegner og fyller ut teksten som er angitt i den første parameteren i posisjon (x, y). Også hans argument bredde det er valgfritt, men når det er erklært setter det en grense for bredden på teksten.
strokeText (, x, y, bredde): Tegner og lar teksten stå uten polstring i posisjon (x, y). Som den forrige metoden i det valgfrie argumentet, begrenser den bredden på teksten.
La oss se følgende eksempel på hvordan du bruker disse metodene til å tegne tekst på lerretet vårt:
Eksempel Din nettleser støtter ikke elementet lerret I denne koden bruker vi begge metodene for å tegne den samme teksten, begge i samme posisjon, men med en annen farge som vi oppnår en effekt av en ytre ramme med en farge og en fylling av en annen farge, med dette kan vi etablere en mer markant forskjell mellom fillText Y strokeText.
Til slutt, og for å fullføre denne opplæringen, la oss se hvordan det ser ut i nettleseren.
