El HTML5 etiquetes <canvas>

La nova etiqueta és una etiqueta HTML5 <canvas> no és present en les versions anteriors, el que pot ser usat per dibuixar i treballar amb gràfics.

L'etiqueta <canvas> necessita un suport llenguatge de scripting, com JavaScript per funcionar i realitzar plenament el seu potencial.

El propòsit d'aquest treball és il · lustrar l'ús bàsic d'aquesta noves etiquetes, però alguns punts presentats per l'ús constant d'exemples pràctics, espero, facilitarà l'aprenentatge.

Premissa

Com a novetat, el llenç no és el millor amb el suport de tots els navegadors, així que és possible que els exemples de demostració en aquest article no es mostren correctament.
La prova es va dur a terme amb Google Chrome, en què no hem tingut cap problema.

Utilitza l'etiqueta <canvas>

L'ús comú de l'etiqueta Canvas és molt simple i no és diferent d'altres etiquetes HTML.
Formalment llenç és un simple contenidor i, com a tal, té una etiqueta d'obertura (<canvas>) i tancament (</ tela>):

 <Canvas Id="esempio" width="196" height="96">

 





 Element no és compatible







 </ Canvas>

Si no s'indica explícitament la mida (amplada i alçada a través d'atributs), la mida assignat al contenidor és el valor per defecte, un rectangle de base amb l'altura de 300 i 150.
L'atribut id, per descomptat, no és essencial, però, al meu entendre, sempre és una bona idea trucar per tenir una referència única per a cada objecte que s'utilitza en la pàgina.

La part de text delimitat per <canvas> i </ Canvas> per representar la nota indica que el gràfic no és compatible amb el navegador.

Abans de començar amb els detalls d'implementació de prova el potencial de la lona amb un simple codi per provar en viu:

 <Canvas Id="bandierina" width="180" height = "100"> No suportat </ tela>







 <script type="text/javascript">







 var llenç = 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>

En aquesta pàgina es pot veure el resultat d'aquest codi (per veure la sortida correctament, ha de tenir, un cop més, un navegador que suporti HTML5).

Com ja es va anunciar al principi de l'article, en aquesta secció de codi és explícit el fet que el treball de la lona per mitjà d'un script. D'aquest exemple podem immediatament notar la tècnica estàndard per extreure les variables objecte de lona de fons:

 / / Creem l'element llenç amb la ID







 var llenç = document.getElementById ('flag');









 / / Crea un nou objecte de dues dimensions en el llenç







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

El mètode JavaScript getElementById emmagatzema l'objecte en un llenç variable, mitjançant el valor del seu camp d'identificació; getContext ('2 d ') recull el medi ambient, o un objecte que proporciona al programador un nombre de maneres de treballar amb la tela com desitjats (en el nostre cas que vulgui treballar amb les funcions de gràfics de dues dimensions, és a dir, en 2D).

En les pàgines següents enumerarem algunes operacions bàsiques d'utilitat per al programador té la intenció d'utilitzar el llenç.

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