Tag-ul <canvas> HTML5

Tag-ul nou este o HTML5 <canvas> tag-ul nu este prezent în versiunile anterioare, care pot fi folosite pentru a trage şi de a lucra cu grafice.

<canvas> Tag-ul are nevoie de un sprijin limbaj de scripting, cum ar fi JavaScript să funcţioneze corect şi de a efectua pe deplin potenţialul.

Scopul acestui articol este de a ilustra utilizarea de bază a tag-uri noi, dar unele puncte avansate de utilizarea constantă de exemple practice, sper, va facilita învăţarea.

Premisă

Ca o noutate absolută în cel mai bun panza nu este suportată de toate browserele, deci este posibil ca exemplele demonstrative în acest articol nu sunt afişate corect.
Testul a fost efectuat cu Google Chrome, pe care nu aţi avut nici o problema.

Utilizaţi <canvas> tag-ul

Utilizarea în comun a tag-ul Canvas este destul de simplă şi nu diferă de alte tag-uri HTML.
Formal Canvas este un recipient simplu şi, ca atare, are o etichetă de deschidere (<canvas>) şi de închidere (</ Canvas>):

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

 





 Elementul nu sunt acceptate







 </ Canvas>

În cazul în care dimensiunile nu sunt indicate în mod explicit (folosind atributele lăţimea şi înălţimea) dimensiunea atribuit rezervorul este implicit, un dreptunghi de bază, cu înălţimea de 300 şi 150.
Atributul id, desigur, nu este esenţială, dar, în opinia mea, aceasta este întotdeauna o idee bună pentru a apela pentru a avea o referinţă unică pentru fiecare obiect care este utilizat pe pagina.

Porţiune de text delimitat de <canvas> şi </ pânză> pentru a reprezenta nota indică în cazul în care grafic nu este acceptată de browser-ul dumneavoastră.

Înainte de a începe cu detaliile punerii în aplicare de testare a potenţialului de panza cu un cod simplu pentru a trăi de încercare:

 <canvas id="bandierina" width="180"> height = "100"> Nu se acceptă </ Canvas>







 <script type="text/javascript">







 var panza = document.getElementById ('pavilion');







 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>

Pe această pagină , puteţi vedea rezultatul acestui cod (pentru a vedea de ieşire corect, trebuie să aveţi, încă o dată, un browser care acceptă HTML 5).

Aşa cum deja a anunţat, la începutul articolului, în această secţiune de cod este explicit faptul că munca panza, folosind un script. Din acest exemplu, putem nota imediat tehnica standard pentru a extrage panza variabilele obiect de fond:

 / / Crearea elementul panza de ID-ul







 var panza = document.getElementById ('pavilion');









 / / Crearea unui nou obiect bidimensional pe panza







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

Metoda Javascript getElementById magazine obiect într-o pânză de variabilă, prin valoarea câmpului id sale; getContext ('2 d ') ia context, sau un obiect care oferă programatorului o serie de metode pentru a lucra cu panza ca dorit (în cazul nostru doriţi să lucraţi cu funcţii de două-dimensional grafică, de exemplu, 2D).

În paginile următoare vom lista anumite operaţiuni de bază, în mod util la programator intenţionează să facă uz de panza.

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