HTML5 - Efecte și transformări

Cuprins
Există diferite tipuri de efecte și transformări care poate fi aplicat pe pânză, acest lucru permite să genereze imagini care înainte nu puteau fi imaginate decât în ​​bliț și alte instrumente similare.
Printre aceste efecte avem crearea de umbre care ne permite să oferim o ușurare desenelor pe care le încorporăm în pânzăExistă, de asemenea, efecte de transparență, care ne permit să suprapunem un element pe altul, generând infinite probabilități de proiectare.
Nuanțe
Umbrele ne permit să oferim un efect de profunzime și relief elementelor noastre, pe pânză putem încorpora aceste umbre elementelor, pentru aceasta avem următoarele proprietăți care ne permit să le personalizăm în funcție de ceea ce vrem să realizăm cu ele:
  • shadowBlur: Setează gradul de claritate al umbrei la o valoare mai mare, mai puțină claritate și o mai mare dispersie a acesteia.
  • umbrăCuloare: Vă permite să setați culoarea umbrei.
  • shadowOffsetX: Setează punctul de ieșire orizontal al umbrei.
  • shadowOffsetY: Setează punctul vertical de cădere a umbrei.
Să vedem mai jos un exemplu de cod despre cum să utilizați aceste proprietăți pentru a construi umbre:
 Exemplu Browserul dvs. nu acceptă elementul pânză 

În acest exemplu, aplicăm umbre unui dreptunghi, precum și textului și unei curbe, să vedem cum arată acest lucru în browser:

Transparențe
Pentru a stabili transparența avem două moduri, prima este utilizarea funcția rgba în atribute fillStyle Da strokeStyle; al doilea mod pe care îl avem este să folosim proprietatea desenului globalAlpha care se aplică universal.
Să vedem mai jos un exemplu folosind a doua formă care este cea mai simplă și cea mai directă de aplicat, subliniem că valorile pe care le acceptă globalAlpha sunt 0 pentru transparență deplină Da 1 pentru a-l face total opac, în cazul exemplului vom folosi 0,5 ca valoare care ne permite o cale de mijloc:
 Exemplu Browserul dvs. nu acceptă elementul pânză 

După cum putem vedea, ceea ce am făcut a fost să desenăm un dreptunghi peste text și datorită globalAlpha vedem efectul transparenței care ne permite să apreciem cele două figuri desenate:

Cu aceasta încheiem tutorialul cu care avem deja cunoștințele pentru a putea aplica unele efecte interesante compozițiilor noastre în elementul pânză din HTML5.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv

Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii

wave wave wave wave wave