HTML5 - Effekter og transformasjoner

Innholdsfortegnelse
Det finnes forskjellige typer effekter og transformasjoner som kan brukes på lerret, tillater dette å generere bilder som før bare kunne forestilles i flash og andre lignende verktøy.
Blant disse effektene har vi skapelsen av skygger som lar oss gi en lettelse til tegningene vi inkorporerer i vår lerretDet er også åpenhetseffekter som gjør at vi kan legge et element på et annet og generere uendelige design -sannsynligheter.
Nyanser
Skyggene tillater oss å gi en dybde og lindringseffekt til elementene våre. På lerretet kan vi inkorporere disse skyggene til elementene, for dette har vi følgende egenskaper som lar oss tilpasse dem avhengig av hva vi vil oppnå med dem:
  • shadowBlur: Angir skarphetsgraden til en høyere verdi, mindre skarphet og mer spredning av den.
  • skyggeFarge: Lar deg angi fargen på skyggen.
  • shadowOffsetX: Angir skyggens horisontale utgangspunkt.
  • shadowOffsetY: Angir det vertikale fallpunktet for skyggen.
La oss se nedenfor et kodeeksempel på hvordan du bruker disse egenskapene til å konstruere skygger:
 Eksempel Din nettleser støtter ikke elementet lerret 

I dette eksemplet bruker vi skygger på et rektangel samt tekst og en kurve, la oss se hvordan dette ser ut i nettleseren:

Transparenter
For å etablere åpenhet har vi to måter, den første er å bruke rgba -funksjon i attributter fillStyle Y strokeStyle; den andre måten vi har er å bruke tegneegenskapen globalAlpha som gjelder universelt.
La oss se et eksempel nedenfor ved å bruke det andre skjemaet som er det enkleste og mest direkte å bruke, vi markerer at verdiene det godtar globalAlpha er 0 for full åpenhet Y 1 for å gjøre den helt ugjennomsiktig, i eksempelet vil vi bruke 0,5 som en verdi som gir oss en mellomting:
 Eksempel Din nettleser støtter ikke elementet lerret 

Som vi kan se, var det vi gjorde å tegne et rektangel over teksten og takket være globalAlpha vi ser effekten av åpenhet som gjør at vi kan sette pris på de to figurene som er tegnet:

Med dette fullfører vi opplæringen som vi allerede har kunnskap om for å kunne bruke noen interessante effekter på komposisjonene våre i lerretselementet i HTML5.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
wave wave wave wave wave