Tegus <canvas> HTML5

Naujų tag tegus <canvas> HTML5 nėra pateikti ankstesnėse versijose, kuris gali būti naudojamas atkreipti ir dirbti su grafika.

Tegus <canvas> poreikius skriptų kalbos palaikymas, pavyzdžiui, "JavaScript" tinkamai funkcionuoti ir atlikti visą jo potencialą.

Šio straipsnio tikslas yra parodyti pagrindiniai naudoti naujas gaires, tačiau kai kuriose vietose Išplėstinė kurį nuolat naudoti praktinių pavyzdžių, tikiuosi, bus lengviau mokytis.

Prielaida

Kaip absoliuti naujovė geriausias drobė nepalaikomas visose naršyklėse, todėl įmanoma, kad parodomuosius pavyzdžius šiame straipsnyje nėra rodomi teisingai.
Bandymas buvo atliktas su "Google Chrome", dėl kurių nesate patyrę jokių problemų.

Naudokite tegus <canvas>

Bendro naudojimo drobė tegus yra gana paprastas ir niekuo nesiskiria nuo kitų HTML žymes.
Formaliai drobė paprastą konteinerį ir, kaip tokia, turi atidarymo žymę (<canvas>) ir uždarymo (</ drobė>):

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

 





 Elementas nepalaikomas







 </ Paveikslai>

Jei matmenys nenurodyta aiškiai (naudojant atributus plotis ir aukštis) dydis priskirtas prie konteinerio yra numatytasis, pagrindinio stačiakampio aukščio 300 ir 150.
ID atributas, žinoma, nėra labai svarbus, bet, mano nuomone, ji visada gera idėja skambinti turėti unikalų atskaitos už kiekvieną objektą, kuris yra naudojamas puslapyje.

Teksto dalis aptverti <canvas> ir </ drobė> atstovauti dėmesį rodo kai grafikos nepalaiko jūsų naršyklėje.

Prieš pradedant įgyvendinimo detales išbandyti drobė potencialą paprastą kodą išbandyti gyventi:

 <canvas id="bandierina" width="180"> height = "100"> nepalaikomas </ Paveikslai>







 <script type="text/javascript">







 var drobė = document.getElementById ("vėliavos");







 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>

Į šį puslapį galite matyti šio kodekso (Norėdami pamatyti išėjimo teisingai, turite dar kartą, naršyklė, kuri palaiko HTML 5) rezultatas.

Kaip jau buvo paskelbta, kad šioje kodekso skyriuje straipsnio pradžioje yra aiškus faktas, kad drobė darbą naudojant scenarijų. Nuo Šiame pavyzdyje mes galime iš karto atkreipti dėmesį į standartinę techniką ekstraktas objektas drobės fone kintamuosius:

 / / Sukuriamas drobės elementas pagal ID







 var drobė = document.getElementById ("vėliavos");









 / / Sukurti naują dvimatis objektas ant drobės







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

Javascript getElementById metodas parduotuvėse objekto kintamasis drobė, per savo ID lauko reikšmę; getContext (2 d) laikosi kontekste arba objektą, kuris siūlo programuotojas metodų skaičius dirbti su drobė kaip norimo (mūsų atveju jūs norite dirbti su dvimatis grafikos funkcijas, ty 2D).

Šiuose puslapiuose mes jums sudarysime sąrašą keletą pagrindinių operacijų naudinga programuotojas ketina pasinaudoti drobės.

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