El elemento Canvas es una de las novedades más anticipada que tiene HTML5 ya que es una seria alternativa al complemento Flash de Adobe, gracias a las capacidades nativas y al no depender de una librería de terceros, ganamos en estabilidad y soporte de los navegadores directamente, en el caso de un problema con la implementación del estándar HTML5.
El elemento Canvas nos permite delimitar un área en nuestros documentos HTML5 donde podemos dibujar e inclusive agregar efectos y movimientos a través de Javascript.
El elemento Canvas
Antes de poder empezar a trabajar con el elemento Canvas, vamos a definir sus características básicas, tenemos que es un elemento de flujo, es totalmente nuevo en HTML5, sus atributos son height para su altura y width para el ancho.
Veamos a continuación un pequeño ejemplo de como podemos definir un Canvas en nuestro documento:
Veamos rápidamente que pasa en el ejemplo; primero definimos un estilo donde le asignamos un borde un poco grueso para poder distinguir nuestro Canvas vacío, luego iniciamos el elemento Canvas con su etiquete de apertura y definimos sus atributos de altura y ancho, dentro de las etiquetas colocamos un mensaje por si el documento es abierto con un navegador que no soporte esta especificación del estándar.
Veamos ahora como se ve en nuestro navegador este código que acabamos de explicar:
Como vemos de momento solo tenemos los bordes definidos en los estilos y un área vacía, esto quiere decir que nuestro navegador si soporta el uso de Canvas.
Nuestro primer dibujo
Como mencionamos al inicio del tutorial, para poder dibujar y hacer acciones dentro del Canvas debemos valernos de Javascript, para ello utilizaremos un método llamado getContext() que nos coloca en el contexto del Canvas y con él podemos indicarle al mismo que debe mostrar.
Podemos dibujar figuras tanto en 2D como en 3D, para ello le pasamos en el caso del primero, el argumento “2d”.
Veamos el siguiente ejemplo para poder definir de mejor forma lo que estamos explicando:
Acá simplemente lo que hicimos fue definir una variable ctx a la cual le vamos a asignar el objeto document y este último va a llamar al método getContext y aplicarlo sobre el elemento Canvas; luego tenemos que la variable ctx llama a un método llamado fillRect y a este le pasamos algunas coordenadas, si vemos de cerca le pasamos 4 lados, veamos que nos ha dibujado esto en el navegador:
En este ejemplo hemos dibujado un cuadrado en nuestro Canvas, no es nada espectacular, sin embargo nos sirve para demostrar como trabaja este elemento en HTML5.
El elemento Canvas nos permite delimitar un área en nuestros documentos HTML5 donde podemos dibujar e inclusive agregar efectos y movimientos a través de Javascript.
El elemento Canvas
Antes de poder empezar a trabajar con el elemento Canvas, vamos a definir sus características básicas, tenemos que es un elemento de flujo, es totalmente nuevo en HTML5, sus atributos son height para su altura y width para el ancho.
Veamos a continuación un pequeño ejemplo de como podemos definir un Canvas en nuestro documento:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: medium double black; margin: 4px}
</style>
</head>
<body>
<canvas width="500" height="200">
Su navegador no ofrece soporte para el elemento <code>canvas</code>
</canvas>
</body>
</html>
Veamos rápidamente que pasa en el ejemplo; primero definimos un estilo donde le asignamos un borde un poco grueso para poder distinguir nuestro Canvas vacío, luego iniciamos el elemento Canvas con su etiquete de apertura y definimos sus atributos de altura y ancho, dentro de las etiquetas colocamos un mensaje por si el documento es abierto con un navegador que no soporte esta especificación del estándar.
Veamos ahora como se ve en nuestro navegador este código que acabamos de explicar:
Como vemos de momento solo tenemos los bordes definidos en los estilos y un área vacía, esto quiere decir que nuestro navegador si soporta el uso de Canvas.
Nuestro primer dibujo
Como mencionamos al inicio del tutorial, para poder dibujar y hacer acciones dentro del Canvas debemos valernos de Javascript, para ello utilizaremos un método llamado getContext() que nos coloca en el contexto del Canvas y con él podemos indicarle al mismo que debe mostrar.
Podemos dibujar figuras tanto en 2D como en 3D, para ello le pasamos en el caso del primero, el argumento “2d”.
Veamos el siguiente ejemplo para poder definir de mejor forma lo que estamos explicando:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: medium double black; margin: 4px}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="100">
Su navegador no ofrece soporte para el elemento <code>canvas</code>
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillRect(10, 10, 50, 50);
</script>
</body>
</html>
Acá simplemente lo que hicimos fue definir una variable ctx a la cual le vamos a asignar el objeto document y este último va a llamar al método getContext y aplicarlo sobre el elemento Canvas; luego tenemos que la variable ctx llama a un método llamado fillRect y a este le pasamos algunas coordenadas, si vemos de cerca le pasamos 4 lados, veamos que nos ha dibujado esto en el navegador:
En este ejemplo hemos dibujado un cuadrado en nuestro Canvas, no es nada espectacular, sin embargo nos sirve para demostrar como trabaja este elemento en HTML5.
