Indholdsfortegnelse
Med de forskellige tegnemetoder set i lærred Det er muligt at definere områder inden for dem at tegne, selvom dette er lidt mere komplekst, er det helt muligt, men vi har også mulighed for at opnå det samme resultat ved hjælp af metoden clip ().Et andet aspekt, der også kan inkorporeres i lærred er teksttegningen, måske tror vi, at vi ved hjælp af CSS og andre elementer kan tegne en tekst, der er den samme eller flottere, men dog i lærred giver os mulighed for at anvende native animationer i HTML5.
Klip metode
Som vi nævnte i begyndelsen, forenkler denne metode vejen til hvordan kan vi oprette et afsnit inden for et lærred, for at kunne introducere andre tegnede elementer, såsom en ny tegning eller fylde den med en bestemt farve.
For at bruge dette værktøj skal vi kalde metoden klip (), hvad denne metode gør, er at oprette en region af klipning eller et nyt afsnit, lad os se i følgende kode, hvordan det fungerer:
Eksempel Din browser understøtter ikke elementet lærred I denne kode tegner vi først et stort rektangel i gult, derefter opretter vi en ny region inden for den ved hjælp af clip () metode og inden for denne region genererer vi et nyt rødt rektangel.
Lad os se, hvordan dette ser ud i vores browser:
Vi kan også tegne tekst inden for et lærred, til dette har vi følgende metoder:
fillText (, x, y, bredde): Tegner og udfylder den tekst, der er angivet i den første parameter i position (x, y). Også hans argument bredde det er valgfrit, men når det erklæres, sætter det en grænse for tekstens bredde.
strokeText (, x, y, bredde): Tegner og efterlader teksten uden polstring på position (x, y). Ligesom den tidligere metode i dets valgfrie argument begrænser den bredden på teksten.
Lad os se følgende eksempel på, hvordan du bruger disse metoder til at tegne tekst på vores lærred:
Eksempel Din browser understøtter ikke elementet lærred I denne kode bruger vi begge metoder til at tegne den samme tekst, begge i samme position, men med en anden farve, hvormed vi opnår en effekt af en ydre ramme af en farve og en fyldning af en anden farve, med dette kan vi etablere en mere markant forskel mellem fillText Y strokeText.
Endelig og for at afslutte denne vejledning lad os se, hvordan det ser ud i browseren.
