En la unidad anterior vimos cómo hacer transformaciones y transiciones sobre los elementos de nuestra página web. De esta forma conseguíamos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS. Además, también hemos visto cómo utilizar la propiedad animation de CSS para crear animaciones concatenadas.
En este apartado vamos a seguir viendo cómo crear animaciones, pero en esta ocasión veremos el elemento <canvas>. Este elemento nos permite pintar gráficos, crear animaciones y desarrollar videojuegos mediante una API (Application Programming Interface, Interfaz de Programación de Aplicaciones) de JavaScript.
7. Elemento Canvas en HTML5
Lo primero que tenemos que hacer para trabajar con Canvas es crear un lienzo y, a partir de ese lienzo, incluir elementos y modificarlos. Veamos los pasos a seguir.
7.1. Pasos para crear un Canvas:
Para utilizar Canvas haremos lo siguiente:
1) Crearemos un lienzo (espacio rectangular vacío) en el que serán mostrados todos los elementos:
<canvas id="lienzo" width="500" height="300">
El navegador no soporta canvas
</canvas>
2) Accedemos al elemento <canvas> desde Javascript:
Primero, accedemos al objeto DOM del elemento, normalmente, a través del método getElementById, y posteriormente, utilizamos el método getContext para obtener el contexto de dibujo, sobre el cual, se puede dibujar.
var ctx=null, canvas=null;
function iniciar()
{
canvas=document.getElementById('lienzo');
ctx=canvas.getContext('2d');
}
window.addEventListener("load", iniciar, false);
En el ejemplo anterior, guardamos una referencia al elemento <canvas> en la variable canvas y el contexto de dibujo lo creamos utilizando getContext(‘2d’). Con esto obtenemos un contexto para dibujar en 2 dimensiones.
3) Dibujar formas en el lienzo:
A continuación, podemos empezar a crear formas y realizar manipulaciones según las coordenadas concretas del contexto. Veamos las formas básicas que podemos crear en nuestro lienzo.
7.2. Formas básicas en Canvas
7.2.1. Rectángulos
La función fillRect(x, y, width,height) nos permite dibujar un rectángulo ‘relleno’ y la función strokeRect(x, y,width, height) un rectángulo con sólo su contorno. Mediante lineWidth especificamos el ancho de su contorno.
Se puede establecer el color mediante las propiedades fillStyle y strokeStyle. Es posible usar rgb, rgba, un código hexadecimal o la palabra clave de un color.
ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; //Color ctx.fillRect(100, 10, 60, 50); //Ractángulo relleno ctx.lineWidth = 5 //ancho de contorno ctx.strokeStyle = "red"; //COlor ctx.strokeRect(200, 70, 60, 50); //Rectángulo de solo contorno
Ejemplo en CodePen
Mediante la función clearRect(x, y, width, height) podemos borrar cualquier elemento que haya sido dibujado en el Canvas dentro de un área.
ctx.clearRect(210, 20, 25, 25);
7.2.2. Líneas
Para indicar que queremos dibujar una línea lo primero que debemos hacer es llamar a la función beginPath().
A continuación llamaremos a moveTo(x, y) para movernos a la posición donde nuestra línea comenzará. Y a lineTo(x, y) para ‘dibujar’ la línea. Para hacerla visible utilizaremos la función stroke().
Podemos especificar el ancho y el color de la línea con las propiedades lineWidth y strokeStyle.
ctx.beginPath(); ctx.moveTo(5, 5); ctx.lineTo(5, 295); ctx.moveTo(295, 5); ctx.lineTo(295, 295); ctx.lineWidth = 1; ctx.strokeStyle = "#CC0000"; ctx.stroke();
Ejemplo en CodePen
7.2.3. Arcos
Para indicar que vamos a dibujar un arco llamaremos inicialmente a la función beginPath(). Dibujaremos un arco o un círculo con la función arc(x, y, radio, angIni, angFin, sentidoAntihorario). X e y indican el centro del círculo, y los ángulos han de indicarse en radianes. El arco no será visible hasta llamar a fill() o a stroke().
ctx.beginPath(); // 2*Math.PI es la manera corta de expresar 360 grados // en radianes. // var radianes = (Math.PI / 180) * grados; ctx.arc(150, 150, 50, 0, 2*Math.PI); ctx.lineWith = 10; ctx.strokeStyle = "yellow"; ctx.stroke();
Ejemplo en CodePen
7.2.4. Texto
A través de la función fillText(texto, x, y) podemos dibujar texto dentro del Canvas. Podemos dar formato al texto estableciendo previamente las propiedades font, textAlign y fillStyle.
ctx.font = 'Bold 20px Tahoma';
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
ctx.fillText('ENIUN', 50, 50);
Ejemplo en CodePen
7.2.5. Imágenes
Para añadir una imagen lo primero que tenemos que hacer es crear un objeto Image y establecer su propiedad src.
Con la función drawImage(objImg, x, y) añadiremos la imagen al Canvas.
var img = new Image();
img.src = 'img/eniun.png';
img.onload = function(){
ctx.drawImage(img, 10, 10);
};
Si ejecutamos el método .drawImage() sin llamar al evento .onload puede que no se ejecute correctamente si todavía no se ha cargado la imagen. Por este motivo se utiliza el evento .onload.
Más información:
Ejemplo con todos los elementos estudiados:
Ver más ejemplos de creación de formas
Comprueba tu apendizaje
Ejercicio propuesto
Actividad 7
Añade un nuevo artículo en el blog de tu proyecto web que pinte un Canvas con todos los elementos que hemos visto.