La etiqueta HTML5 <canvas>

La nueva etiqueta es una etiqueta HTML5 <canvas> no está presente en las versiones anteriores, lo que puede ser usado para dibujar y trabajar con gráficos.

La etiqueta <canvas> necesita un apoyo lenguaje de scripting, como JavaScript para funcionar correctamente y realizar plenamente su potencial.

El propósito de este artículo es ilustrar el uso básico de las nuevas etiquetas, pero algunos puntos presentados por el uso constante de ejemplos prácticos, espero, facilitará el aprendizaje.

Premisa

Como una novedad absoluta en el mejor lienzo no es compatible con todos los navegadores, así que es posible que los ejemplos de demostración en este artículo no se muestran correctamente.
La prueba se llevó a cabo con Google Chrome, en el que no hemos tenido ningún problema.

Use la etiqueta <canvas>

El uso común de la etiqueta canvas es bastante simple y no es diferente de otras etiquetas HTML.
Formalmente lienzo es un simple contenedor y, como tal, tiene una etiqueta de apertura (<canvas>) y cierre (</ Canvas>):

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

 





 Elemento no es compatible







 </ Canvas>

Si las dimensiones no se indican explícitamente (utilizando el ancho de los atributos y la altura), el tamaño asignado al contenedor es el valor predeterminado, un rectángulo de base con altura de 300 y 150.
El atributo id, por supuesto, no es esencial, pero, en mi opinión, siempre es una buena idea llamar para tener una referencia única para cada objeto que se utiliza en la página.

La parte de texto delimitado por <canvas> y </ Canvas> para representar a la nota indica que el gráfico no es compatible con tu navegador.

Antes de comenzar con los detalles de implementación de prueba el potencial de la lona con un simple código para probar en vivo:

 <Canvas id="bandierina" width="180" height = "100"> No compatibles </ Canvas>







 <script type="text/javascript">







 var lienzo = document.getElementById ("bandera");







 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 esta página se puede ver el resultado de este código (para ver la salida correctamente, debe tener, una vez más, un navegador que soporte HTML 5).

Como ya se anunció al principio del artículo, en esta sección de código es explícito el hecho de que el trabajo de la lona con un script. A partir de este ejemplo, inmediatamente se nota la técnica estándar para extraer las variables objeto de lona de fondo:

 / / Cree el elemento de tela de ID







 var lienzo = document.getElementById ("bandera");









 / / Crear un nuevo objeto de dos dimensiones en el lienzo







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

Método getElementById Javascript almacena el objeto en un lienzo variable, a través del valor de su campo de identificación; getContext ('2 d ') toma el contexto, o un objeto que ofrece al programador una serie de métodos para trabajar con el lienzo como deseado (en nuestro caso, queremos trabajar con las funciones de gráficos de dos dimensiones, es decir, en 2D).

En las páginas siguientes haremos una lista de algunas operaciones básicas de utilidad para el programador tiene la intención de hacer uso de la tela.

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