Tag <canvas> HTML5

Nová značka je značka <canvas> HTML5 nie je k dispozícii v predchádzajúcich verziách, ktoré možno použiť na kreslenie a prácu s grafikou.

Tag <canvas> potrebuje podporu skriptovacieho jazyka, ako je JavaScript pre správnu funkciu a vykonávať naplno svoj potenciál.

Účelom tohto článku je objasniť základné použitie nových značiek, ale niektoré body predložené neustále používanie praktických príkladov, ako dúfam, uľahčí učenie.

Predpoklad

Ako absolútnu novinku v najlepšom plátne nie je podporovaný všetkými prehliadačmi, takže je možné, že demonštračné príklady v tomto článku sa nezobrazujú správne.
Skúška bola vykonaná s Google Chrome, na ktorom ste nezažil žiadne problémy.

Použite tag <canvas>

Bežné používanie plátna značka je veľmi jednoduchá a nijako nelíši od ostatných HTML tagy.
Formálne plátno je jednoduchý obal, a ako taká má otváraciu tag (<canvas>) a uzavretie (</ Canvas>):

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

 





 Element nie je podporovaný







 </ Canvas>

Ak rozmery nie sú uvedené explicitne (pomocou atribútov width a height) veľkosť kontajnera pridelené je predvolený, základný obdĺžnika s výškou 300 a 150.
Id atribútu, samozrejme, nie je podstatné, ale podľa môjho názoru, je vždy dobré zavolať mať jedinečný odkaz pre každý objekt, ktorý je používaný na stránke.

Textovej časti vymedzenej <canvas> a </ plátno> reprezentovať POZNÁMKA označuje, kedy je grafika nepodporuje vašom prehliadači.

Pred zahájením implementačných detailov testu potenciál plátno jednoduchého kódu na testovanie Live:

 <canvas id="bandierina" width="180"> height = "100"> nie je podporované </ Canvas>







 <script type="text/javascript">







 var plátna = document.getElementById ('flag');







 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>

Na tejto stránke môžete vidieť výsledok tohto kódexu (vidieť výstup správne, musíte mať opäť prehliadač, ktorý podporuje HTML 5).

Ako už bolo oznámené na začiatku článku v tejto časti kódu je výslovne uviedol, že plátno práce pomocou skriptu. Z tohto príkladu môžeme okamžite na vedomie, štandardné techniky extrahovať premenné objektu plátno na pozadí:

 / / Vytvorenie plátno položku ID







 var plátna = document.getElementById ('flag');









 / / Vytvorenie nového dvoch-dimenzionální objekt na plátne







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

Javascript getElementById metóda uloží objekt do premennej plátno, a to prostredníctvom hodnota jeho id pole, getContext ('2 d) sa kontextu, alebo objekt, ktorý ponúka programátorovi niekoľko metód pre prácu s plátnom as požadovanú (v našom prípade, že chcete pracovať s dvoch-rozmerné grafické funkcie, tj 2D).

Na nasledujúcich stránkach budeme Zoznam niektoré základné operácie, užitočné pre programátora chce využiť plátna.

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