Turinys
Elementas Drobė Tai viena iš labiausiai laukiamų naujovių HTML5 Kadangi tai yra rimta alternatyva „Adobe“ „Flash“ papildiniui, dėl savo vietinių galimybių ir nepriklausydama nuo trečiosios šalies bibliotekos, mes gauname stabilumą ir naršyklės palaikymą tiesiogiai, jei kyla problemų įgyvendinant HTML5 standartą .Elementas Drobė leidžia mums dokumentuose atskirti sritį HTML5 kur galime piešti ir net pridėti efektų bei judesių per „Javascript“.
Drobės elementas
Prieš pradėdami dirbti su elementu Drobė, mes apibrėšime pagrindines jo charakteristikas, turime tai, kad tai srauto elementas, jis yra visiškai naujas HTML5, jo atributai yra aukštis pagal aukštį ir plotis pagal plotį.
Žemiau pamatysime nedidelį pavyzdį, kaip savo dokumente galime apibrėžti drobę:
Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė Greitai pažiūrėkime, kas atsitinka pavyzdyje; pirmiausia mes apibrėžiame stilių, kuriame priskiriame šiek tiek storą kraštą, kad galėtume atskirti savo Drobė tuščias, tada pradedame „Canvas“ elementą su jo atidarymo etikete ir apibrėžiame jo aukščio ir pločio atributus, etikečių viduje dedame pranešimą, jei dokumentas būtų atidarytas naudojant naršyklę, kuri nepalaiko šios standarto specifikacijos.
Dabar pažiūrėkime, kaip šis mūsų ką tik paaiškintas kodas atrodo mūsų naršyklėje:
Pirmasis mūsų piešinys
Kaip minėjome pamokos pradžioje, norėdami piešti ir atlikti veiksmus drobėje, turime naudoti „Javascript“, tam mes naudosime metodą, vadinamą getContext () kad mus įtraukia į drobės kontekstą ir kartu galime pasakyti, ką parodyti.
Mes galime piešti figūras tiek 2D, tiek 3D formatu, tam mes perduodame pirmąjį argumentą „2d“.
Pažvelkime į šį pavyzdį, kad geriau apibrėžtume, ką paaiškiname:
Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė Čia mes tiesiog nustatėme kintamąjį ctx kuriam ketiname priskirti objektą dokumentas o pastarasis ketina vadinti šį metodą getContext ir pritaikykite jį ant drobės elemento; tada mes turime, kad kintamasis ctx vadina metodą, vadinamą fillRect ir tai mes praleidžiame kai kurias koordinates, jei atidžiai pažvelgsime, praeisime per 4 puses, pažiūrėkime, kad ji tai nubrėžė naršyklėje:
