La especificación de HTML5 incluye un buen número de características, una de las cuales es el elemento canvas. El elemento canvas proporciona una manera fácil y eficaz de dibujar gráficos usando Javascript. Para cada elemento canvas podemos utilizar un objeto contexto o"context", el cual posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc.
Los navegadores pueden implementar múltiples contextos y las diferentes APIs que proporcionarán la funcionalidad de dibujo. En la actualidad la mayoría de los navegadores más importantes incluyen el contexto 2D.
Para usar el elemento canvas, necesitamos dos cosas:
1. Una etiqueta Canvas en el HTML para colocar el canvas dibujante
2. JavaScript para realizar los dibujos
Añadiremos el elemento <canvas> con un código similar al siguiente:
<canvas id="myCanvas" width="300" height="150"> Contenido alternativo, en caso de que el navegador no sea compatible con canvas. </canvas>
Se necesita definir un ID para el elemento, para que más adelante se pueda identificar este mismo elemento mediante Javascript. También es necesario definir una altura y una anchura para el elemento canvas.
En este momento hemos creado algo parecido a una hoja en blanco sobre la que dibujar. Para dibujar deberemos utilizar Javascript, encontrar el elemento canvas con getElementById, inicializar el contexto que deseemos, y utilizar los comandos disponibles en la API del contexto. A continuación vamos a ir viendo algunas de las funciones de la API del contexto 2D.
fillRect()
Esta función, perteneciente al contexto 2D, sirve para dibujar rectángulos rellenos de color.Su sintaxis es:
fillRect(x,y,anchura,altura)
fillRect dibuja un rectángulo cuya esquina superior izquierda está en el punto (x,y) y cuyas dimensiones son las defindas en el parámetro altura y anchura. El color de relleno lo podemos especificar con la propiedad fillStyle, asignando por ejemplo el RGB de un color. Un ejemplo de un primer dibujo podría ser:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Canvas- Ejemplo 1</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
// Comprobamos que podemos acceder al elemento y sus propiedades
if (elem && elem.getContext) {
// Obtenemos el contexto 2D
var context = elem.getContext('2d');
if (context) {
// Dibujamos
context.fillStyle = '#0000FF'; // Azul
context.fillRect (0, 0, 500, 300);
}
}
}, false);
</script>
</head>
<body>
<p><canvas id="myCanvas" width="500" height="300">
Tu navegador no soporta el elemento canvas</canvas>
</body>
</html>
Este ejemplo rellena todo el lienzo con un rectángulo de color azul.
Ver ejemplo en funcionamiento » »
strokeRect()
Esta función sirve para dibujar el contorno de un rectángulo y su sintaxis es similar a fillRect:
strokeRect(x,y,anchura,altura)
De manera similar, para definir el color del borde del rectángulo, utilizamos la propiedad strokeStyle. Además también podemos cambiar el grosor de las líneas con la propiedad lineWidth. Por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Canvas- Ejemplo 1</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
// Comprobamos que podemos acceder al elemento y sus propiedades
if (elem && elem.getContext) {
// Obtenemos el contexto 2D
var context = elem.getContext('2d');
if (context) {
context.strokeStyle = '#999'; // Gris
context.lineWidth = 4; //Grosor
context.strokeRect(10, 50, 350, 150);
}
}
}, false);
</script>
</head>
<body>
<p><canvas id="myCanvas" width="500" height="300">
Tu navegador no soporta el elemento canvas</canvas>
</body>
</html>
Ver ejemplo en funcionamiento » »
clearRect()
clearRect es una función que sirve para borrar áreas rectangulares de un canvas. Su sintaxis es similar a las dos funciones vistas con anterioridad.
clearRect(x,y,anchura,altura)
Paths
Los paths o "caminos" permiten dibujar formas personalizadas. Crear una forma personalizada es bastante sencillo: para empezar a dibujar el camino utilizamos beginPath(), a continuación, dibujamos el camino que constituye la forma usando líneas, curvas y otras primitivas. Una vez que hemos terminado, rellenamos y contorneamos la forma y llamamos a la función closePath() para acabar con la forma.
Un ejemplo podría ser:
context.strokeStyle = '#000'; // Negro context.fillStyle = '#FF0000'; // Rojo context.lineWidth = 10; // context.beginPath(); context.moveTo(20, 20); context.lineTo(250, 20); context.lineTo(20, 250); context.lineTo(20, 15); context.fill(); context.stroke(); context.closePath();
- beginPath() sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino. No tiene ningún parámetro y por si sola no hace ninguna acción visible en el canvas.
- moveTo() sirve para mover el puntero imaginario a las coordenadas x,y donde comenzaremos a hacer el camino. Esta función no dibuja nada, pero nos permite definir el primer punto de un camino.
- lineTo() hace que se dibuje una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y) que se indique como parámetro.
- fill() sirve para rellenar de color el área circunscrita por un camino. Para rellenar de color un camino, el camino tiene que estar cerrado, por lo que, si no lo está, automáticamente se cerrará con una línea recta hasta el primer punto del camino. Si durante los distintos segmentos del camino nos dejamos algún segmento abierto, no se pintará nada.
- closePath() sirve para cerrar un camino, volviendo al punto inicial del dibujo.
Ver ejemplo en funcionamiento » »
Para definir el modo en que se unen las líneas podemos acceder al el atributo lineJoin. El atributo lineJoin acepta los valores "round", "bevel" y "miter". Un ejemplo de uso de este atributo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Canvas- Ejemplo 4</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
// Comprobamos que podemos acceder al elemento y sus propiedades
if (elem && elem.getContext) {
// Obtenemos el contexto 2D
var context = elem.getContext('2d');
if (context) {
var lineJoin = ['round','bevel','miter'];
context.lineWidth = 15;
for (i=0;i<lineJoin.length;i++){
context.lineJoin = lineJoin[i];
context.beginPath();
context.moveTo(0,5+i*50);
context.lineTo(100,70+i*50);
context.lineTo(200,5+i*50);
context.lineTo(300,70+i*50);
context.lineTo(400,5+i*50);
context.stroke();
}
}
}
}, false);
</script>
</head>
<body>
<p><canvas id="myCanvas" width="500" height="300">
Tu navegador no soporta el elemento canvas</canvas>
</body>
</html>
