Tag <canvas> HTML5

Uusi tagi on tagi <canvas> HTML5 ei ole läsnä aiemmat versiot, joita voidaan piirtää ja käsitellä kuvia.

Tag <canvas> tarvitsee skriptikieli tukea, kuten JavaScriptin toimiakseen oikein ja suorittaa täysin sen potentiaalia.

Tämän artikkelin tarkoitus on havainnollistaa perus käyttöön uusia tunnisteita, mutta joitakin kohtia aikaistettu jatkuvaa käyttöä käytännön esimerkeillä, toivon, helpottaa oppimista.

Lähtökohta

Koska absoluuttinen uutuus paras kangas ei tue kaikkia selaimia, joten on mahdollista, että mielenosoituksen esimerkkejä tässä artikkelissa ei näy oikein.
Testi tehtiin Google Chrome, johon et ole kokenut mitään ongelmia.

Käytä tag <canvas>

Yhteinen käyttö Canvas tag on melko yksinkertainen ja ei poikkea muista HTML-tunnisteita.
Muodollisesti Canvas on yksinkertainen säiliö, ja sellaisena, on avaavan koodin (<canvas>) ja sulkeminen (</ Canvas>):

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

 





 Element ei tueta







 </ Canvas>

Jos mitat eivät ole merkitty erikseen (käyttämällä attribuutteja leveys ja korkeus) koko osoitettu kontti on oletusarvoisesti perus suorakulmion korkeus 300 ja 150.
Id attribuutti, tietenkään, ei ole välttämätöntä, mutta mielestäni se on aina hyvä idea kutsua on yksilöllinen viitenumero kunkin objektin, jota käytetään sivulla.

Tekstin osa erotettu <canvas> ja </ kangas> edustamaan huomata ilmoittaa, kun graafinen ei tue selaimen.

Ennen kanssa toteutuksen yksityiskohdat testi potentiaalia kangas yksinkertaisen koodin testata eläviä:

 <canvas id="bandierina" width="180"> height = "100"> ei tueta </ ​​Canvas>







 <script type="text/javascript">







 var Canvas = document.getElementById ("lippu");







 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>

Päällä Tällä sivulla näet tuloksena koodi (nähdä lähetetä oikein, sinulla täytyy olla jälleen selaimen, joka tukee HTML 5).

Kuten jo alussa artikkeli tässä osassa koodia on selkeä tosiasia, että kangas työ skriptin. Tästä esimerkkinä voimme heti huomata standardi tekniikka poimia esineen kankaalle taustamuuttujat:

 / / Luo kankaalle kohteen ID







 var Canvas = document.getElementById ("lippu");









 / / Luo uusi kaksiulotteinen esine kankaalle







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

Javascript getElementById menetelmä tallentaa objektin muuttuja kankaalle kautta arvon kenttään, getContext ('2 d ') vie yhteydessä, tai esine, joka tarjoaa ohjelmoija useita menetelmiä työskennellä kankaalle kuin haluttu (tässä tapauksessa haluat työskennellä kaksiulotteisen grafiikan toiminnot, eli 2D).

Seuraavilla sivuilla tulemme luettelo joitakin perustoiminnot hyödyllistä ohjelmoija aikoo hyödyntää kankaalle.

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