Canvas es una etiqueta introducida en HTML5 que sirve generar gráficos dinamicamente a través de su API javascript. Pueden ser tanto gráficos estáticos como animaciones
El elemento canvas tiene 2 atributos básicos width y height, que son el tamaño del lienzo, por defecto su valor es de 160
<canvas id="micanvas" width="640" height="480">No puedes ver esto</canvas>
Dentro del elemento canvas no puede ir nada, ya que los gráficos los generamos a través de javascript, pero podemos introducir un texto o una imagen, para indicar a los usuarios de un navegador que no lo tenga implementado, que se actualicen, por ejemplo. El navegador cómo no interpretará el canvas, nos mostrará el contenido que le pongamos dentro.
El canvas también se puede usar para dibujar gráficos en tres dimensiones, pero en este artículo nos centraremos en su contexto 2D.
Lo primero que tenemos que hacer para empezar a dibujar es obtener el contexto:
var canvas = document.getElementById('micanvas');
var context = canvas.getContext('2d');
El contexto nos permitirá dibujar primitivas sobre el canvas como rectángulos, círculos, arcos, curvas, líneas y tambíen cargar imágenes externas dentro de él. Podemos ver una referencia completa aquí
Ejemplo:
var image = new Image(); image.src = "ruta/a/la/imagen.png"; context.clearRect(0, 0, 640, 480); context.save(); context.drawImage(image, 100, 200, 50, 50); context.restore();
En este ejemplo hemos cargado una imagen sobre el canvas. Primero creamos en objecto image y establecemos su ruta. Esta imagen debe estar precargada para que se dibuje correctamente. Luego con clearRect limpiamos todos los píxeles del canvas. Con el método drawImage ponemos la imagen sobre el canvas, en la posicion (100, 200) y con un tamaño de 50x50
Haciendo esto varias veces ayudándonos de requestAnimationFrame es como crearemos animaciones.
Quedan dos métodos por explicar, save y restore. Con el método save lo que hacemos es guardar el estado del contexto, luego hacemos toda clase de dibujos y transformaciones para que al llamar al método restore, volvamos al estado anterior y podamos volver a empezar de cero.
Comentarios