Satura rādītājs
Elements Audekls Tas ir viens no visvairāk gaidītajiem jaunumiem HTML5 Tā kā tā ir nopietna alternatīva Adobe Flash spraudnim, pateicoties tās vietējām iespējām un nav atkarīga no trešās puses bibliotēkas, mēs iegūstam stabilitāti un pārlūkprogrammas atbalstu tieši, ja rodas problēmas ar HTML5 standarta ieviešanu .Elements Audekls ļauj mums dokumentos norobežot kādu apgabalu HTML5 kur mēs varam zīmēt un pat pievienot efektus un kustības, izmantojot Javascript.
Audekla elements
Pirms sākat strādāt ar vienumu Audekls, mēs definēsim tā pamatīpašības, mums ir, ka tas ir plūsmas elements, tas ir pilnīgi jauns HTML5, tā atribūti ir augstums tā augstumam un platums tā platumam.
Tālāk apskatīsim nelielu piemēru tam, kā mēs savā dokumentā varam definēt audeklu:
Piemērs Jūsu pārlūkprogramma neatbalsta šo elementu audekls Ātri apskatīsim, kas notiek piemērā; vispirms mēs definējam stilu, kurā mēs piešķiram nedaudz biezu apmali, lai varētu atšķirt mūsu Audekls tukšs, tad mēs sākam Canvas elementu ar tā sākuma etiķeti un definējam tā augstuma un platuma atribūtus, etiķetēs ievietojam ziņojumu gadījumā, ja dokuments tiek atvērts ar pārlūkprogrammu, kas neatbalsta šo standarta specifikāciju.
Tagad redzēsim, kā šis mūsu tikko izskaidrotais kods izskatās mūsu pārlūkprogrammā:
Mūsu pirmais zīmējums
Kā mēs minējām apmācības sākumā, lai zīmētu un veiktu darbības audeklā, mums jāizmanto Javascript, šim nolūkam mēs izmantosim metodi, ko sauc getContext () kas mūs ievieto audekla kontekstā un ar to mēs varam pateikt, ko parādīt.
Mēs varam uzzīmēt figūras gan 2D, gan 3D formātā, šim nolūkam mēs nododam pirmo argumentu "2d".
Apskatīsim šādu piemēru, lai labāk definētu to, ko izskaidrojam:
Piemērs Jūsu pārlūkprogramma neatbalsta šo elementu audekls Šeit mēs vienkārši definējām mainīgo ctx kam mēs piešķirsim objektu dokuments un pēdējais gatavojas izsaukt šo metodi getContext un uzklājiet to uz audekla elementa; tad mums ir tas, ka mainīgais ctx izsauc metodi ar nosaukumu fillRect un tam mēs ejam garām dažas koordinātas, ja ieskatāmies uzmanīgi, tad ejam garām 4 malām, redzēsim, ka pārlūkprogrammā tas ir uzzīmēts:
