HTML5 - efektai ir transformacijos

Turinys
Yra įvairių tipų efektai ir transformacijos kurį galima pritaikyti ant drobės, tai leidžia sukurti vaizdus, ​​kurie anksčiau buvo įsivaizduojami tik naudojant „Flash“ ir kitus panašius įrankius.
Tarp šių efektų turime šešėlių kūrimą, kuris leidžia palengvinti piešinius, kuriuos įtraukiame į savo drobėTaip pat yra skaidrumo efektų, leidžiančių uždėti vieną elementą ant kito, sukuriant begalines projektavimo tikimybes.
Atspalviai
Šešėliai leidžia mums suteikti savo elementams gylio ir reljefo efektą, ant drobės galime įtraukti šiuos šešėlius į elementus, nes mes turime šias savybes, leidžiančias juos pritaikyti priklausomai nuo to, ką norime su jais pasiekti:
  • shadowBlur: Nustato aukštesnę šešėlio ryškumo laipsnį, mažesnį ryškumą ir didesnį jo sklaidą.
  • shadowColor: Leidžia nustatyti šešėlio spalvą.
  • shadowOffsetX: Nustato horizontalų šešėlio išėjimo tašką.
  • shadowOffsetY: Nustato vertikalų šešėlio kritimo tašką.
Toliau pažiūrėkime kodo pavyzdį, kaip naudoti šias savybes šešėliams kurti:
 Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė 

Šiame pavyzdyje šešėliai taikomi stačiakampiui, taip pat tekstui ir kreivei, pažiūrėkime, kaip tai atrodo naršyklėje:

Skaidrės
Norėdami nustatyti skaidrumą, turime du būdus, pirmasis yra naudojant rgba funkcija pagal atributus fillStyle Y strokeStyle; antras būdas yra naudoti piešimo ypatybę globalAlpha tai taikoma visuotinai.
Toliau pateikiamas pavyzdys, naudojant antrąją formą, kuri yra paprasčiausia ir tiesioginė, pabrėžiame, kad vertybės, kurias ji priima globalAlpha yra 0, kad būtų užtikrintas visas skaidrumas Y 1, kad jis būtų visiškai nepermatomas, pavyzdžio atveju mes naudosime 0,5 kaip vertę, leidžiančią mums rasti vidurį:
 Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė 

Kaip matome, mes padarėme stačiakampį virš teksto ir dėka globalAlpha matome skaidrumo poveikį, kuris leidžia mums įvertinti du nupieštus skaičius:

Tuo baigiame pamoką, su kuria jau turime žinių, kad galėtume pritaikyti įdomius efektus savo kompozicijoms drobės elemente HTML5.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką

Padėsite svetainės plėtrą, dalintis puslapį su draugais

wave wave wave wave wave