Tag <canvas> HTML5

Jaunu tagu ir tag <canvas> HTML5 nav sastopams iepriekšējās versijas, ko var izmantot, lai izdarītu un strādāt ar grafiku.

Tag <canvas> nepieciešama skriptu valodas atbalsts, piemēram, JavaScript, lai darbotos pareizi, un veic pilnīgu savu potenciālu.

Šī raksta mērķis ir ilustrēt pamata izmantošana jaunus tagus, bet daži punkti, kurus izvirzījusi pastāvīgi izmanto praktisku piemēru, es ceru, atvieglos mācīšanos.

Telpas

Kā absolūts jaunums, kas vislabāk audekla, neatbalsta visas pārlūkprogrammas, tāpēc ir iespējams, ka demonstrācija piemēri šajā rakstā netiek rādītas pareizi.
Tests tika veikts ar Google Chrome, par ko neesat pieredzējis nekādas problēmas.

Izmantojiet tagu <canvas>

Kopīga izmantošana Gleznas tag ir diezgan vienkārša un ne ar ko neatšķiras no citiem HTML tagus.
Formāli Gleznas ir vienkāršs konteineru un, kā tādam tam ir atvēršanas tagu (<canvas>) un beigu (</ Audekls>):

 <canvas id="esempio" width="196" height="96">

 





 Element nav atbalstīta







 </ Audekls>

Ja izmēri nav norādīti precīzi (izmantojot atribūtus platums un augstums) izmēra piešķirts tvertne ir noklusējuma pamata taisnstūra ar augstumu 300 un 150.
Id atribūts, protams, nav būtiska, bet, manuprāt, tas vienmēr ir laba ideja, lai izsauktu ir unikāls atsauces par katru objektu, kas tiek izmantots lapā.

Teksta daļa, kuras robežas <canvas> un </ audekls> pārstāvēt piezīme norāda, kad grafisko neatbalsta pārlūkprogramma.

Pirms sākt ar īstenošanas detaļas testa potenciālu, audekls ar vienkāršu kodu, lai pārbaudītu dzīvot:

 <canvas id="bandierina" width="180"> height = "100"> Nav atbalstīts </ Audekls>







 <script type="text/javascript">







 var audekls = document.getElementById ("karoga");







 var c = canvas.getContext (2 d ');







 c.fillStyle = "# FF0000";







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF ";







 c.fillRect (0,0,120,100);







 c.fillStyle = "# 00FF00";







 c.fillRect (0,0,60,100);







 </ Script>

Uz šīs lapas var redzēt rezultātu šo kodu (lai redzētu izvades pareizi, jums ir jābūt atkal pārlūkprogramma, kas atbalsta HTML 5).

Kā jau sākumā raksts šajā sadaļā kods ir skaidri noformulētu to, ka audekls darbu, izmantojot skriptu. No šī piemēra mēs varam nekavējoties atzīmēt standarta paņēmieniem, lai iegūtu objektu audekls fona mainīgajiem lielumiem:

 / / Izveidot audekls objektu pēc ID







 var audekls = document.getElementById ("karoga");









 / / Izveidot jaunu divdimensiju objekta uz audekla







 var c = canvas.getContext (2 d ');

Javascript getElementById metode veikali objekta mainīgo audekls, izmantojot vērtību savu id jomā; getContext ('2 d) ņem konteksts vai objekts, kas piedāvā programmētājs vairākas metodes darbam ar audekls kā vēlamo (mūsu gadījumā jūs vēlaties strādāt ar divdimensiju grafikas funkcijas, ti, 2D).

Turpmākajās lappusēs mēs sarakstā dažas pamatdarbības noderīga programmētājs plāno izmantot audekla.

• <<
• 1
• 2
• 3
• 4
• 5
• >>