HTML5 es la versión más reciente de HTML a fecha de hoy. Incluye un elemento nuevo muy interesante para la programación de videojuegos: el canvas (lienzo en español).
El canvas sólo es un contenedor de gráficos en el que se puede pintar usando un script, normalmente en lenguaje javascript. El canvas tiene algunas funciones para dibujar gráficos tales como caminos (paths, para dibujar lineas), círculos, cajas, caracteres de texto y añadir imágenes desde un archivo.
Incluir un canvas
Para incluir un canvas en una página web sólo debemos incluir lo siguiente en el HTML:
<canvas id="my_canvas" width="200" height="100"> </canvas>
Si queremos que tenga borde, por ejemplo de 1px de anchura y color negro (#000000) lo podemos añadir usando el atributo style:
<canvas id="my_canvas" width="200" height="100" style="border:1px solid
#000000;"> </canvas>
Coordenadas del canvas
En el canvas el origen de coordenadas se encuentra en la esquina superior izquierda, que es el punto 0,0 y el eje de abcisas, eje x, u horizontal aumenta de izquierda a derecha, mientras que el eje de ordenadas, eje y o vertical aumenta de arriba a abajo.
Algunos ejemplos
La plantilla básica que usamos es la siguiente:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
var canvas;
var ctx; //contexto del canvas.
function setup(){
// accedemos al canvas
canvas = document.getElementById('my_canvas');
// si se puede acceder al contexto del canvas
if (canvas.getContext){
// accedemos al contexto del canvas
// y llamamos a nuestra función de dibujo.
ctx = canvas.getContext('2d');
draw();
}
else { // el canvas no está soportado
alert('Este navegador no es compatible con canvas');
}
}
// nuestra función de dibujo
function draw(){
}
</script>
</head>
<body onload="setup()">
<canvas id="my_canvas" width="200px" height="100px"
style="border:1px solid #000000;"></canvas>
</body>
</html>
El código anterior es una página HTML con un canvas de 200 x 100 píxeles y borde negro, que está colocado en el body del documento HTML.
En el head del documento HTML hay un script de javascript. Inicialmente se declaran 2 variables,
canvas y
ctx, a las que asignaremos el canvas y su contexto, respectivamente.
El atributo
onload="setup()" del elemento body asigna la función setup() de nuestro script al evento onload del elemento body. Cuando se cargue el elemento body de la página, se dispara su evento onload. Con onload="setup()" hacemos que al lanzarse el evento onload se llame a la función setup() de nuestro script.
En la función setup() preparamos el terreno accediendo al canvas y asignandolo a nuestra variable canvas con la instrucción
canvas = document.getElementById('my_canvas') y luego miramos a ver si podemos acceder a su contexto. Si no podemos, es porque el navegador no es compatible con el canvas y lanzamos un diálogo de alerta. Si se puede acceder al contexto, accedemos y lo asignamos a la variable ctx, con la instrucción
ctx = canvas.getContext('2d'). El 2d hace referencia a que queremos un canvas para dibujar en 2 dimensiones. También existe un contexto para dibujar en 3 dimensiones, al cual accederíamos con
getContext('webgl') pero ambos son muy diferentes y de momento nos vamos a restringir a las 2 dimensiones. Finalmente, desde nuestra función setup() llamamos a nuestra función draw(), en la que incluiremos las instrucciones para dibujar en el canvas. De momento la función está vacía así que no se dibujará nada en el canvas.
A continuación vamos a poner algunos ejemplos de funciones draw para dibujar distintos tipos de cosas. Los ejemplos tienen un exceso de comentarios para explicar cada una de las instrucciones.
Colores y grosor de linea
Se cambian las siguientes propiedades del contexto del canvas:
- lineWidth, para especificar el ancho de la linea.
- strokeStyle, para modificar el color de la linea.
- fillStyle, para modificar el color de relleno.
Dibujando formas con lineas
Usaremos las siguientes funciones del contexto del canvas:
- beginPath(), para comenzar un recorrido.
- moveTo(x,y), para moverse a un punto (sin dibujar).
- lineTo(x,y), para dibujar una recta desde el punto actual al punto x,y especificado como argumento.
- closePath(), para cerrar un camino.
- stroke(), para aplicar trazo al camino.
- fill(), para rellenar un camino, (cerrado o no).
function draw(){
// ponemos el grosor de linea = 3 pixeles
ctx.lineWidth = 3;
// cambiamos el color de la linea, de negro,
// que es el color por defecto, a rojo:
// ctx.strokeStyle="#FF0000";
// o bien de la siguiente forma equivalente,
// sin usar notación hexadecimal.
ctx.strokeStyle = 'rgb(255,0,0)';
//cambiamos el color de relleno, de negro,
// que es el color por defecto, a azul
ctx.fillStyle = 'rgb(0,0,255)';
// vamos a dibujar algunas lineas, formando un triangulo.
ctx.beginPath();
ctx.moveTo(50, 50); // la primera linea parte del punto 50,50
ctx.lineTo(75, 25); // y va hasta 75,25
ctx.lineTo(100, 50); // otra linea desde ese punto hasta 100,50
ctx.closePath(); // y otra cerrando el triangulo.
ctx.stroke(); // aplicar un trazo al camino.
// ahora vamos a dibujar otro triangulo, pero en vez pintar
// un trazo lo vamos a rellenar.
ctx.beginPath();
ctx.moveTo(50, 50); // la primera linea parte del punto 50,50
ctx.lineTo(75, 75); // y va hasta 75,75
ctx.lineTo(100, 50); // otra linea desde ese punto hasta 100,50
//ctx.closePath(); // y otra cerrando el triangulo.
ctx.fill(); // rellenar el camino trazado.
// este triangulo es un poco más pequeño que el anterior
// porque no tiene el trazo del borde.
// además de rellenarlo, se lo podríamos añadir descomentando
// la siguiente linea: ctx.stroke();
}
El resultado de este ejemplo sería lo siguiente:
Dibujando rectángulos
Dibujar rectángulos funciona de forma similar a dibujar lineas, pero en lugar de dibujar linea a linea, podemos dibujar los 4 lados del rectángulo con una única instrucción:
- rect(x, y, width, height)
x e y especifican las coordenadas de la esquina superior izquierda del rectángulo.
function draw(){
ctx.beginPath();
ctx.rect(15,30, 100, 50); // rectángulo de 100x50 situado en 15,30
ctx.strokeStyle = 'rgb(255, 0, 0)'; // linea roja.
ctx.stroke();// pintamos el borde
ctx.fillStyle = 'rgb(128,128,128)'; // un color gris.
ctx.fill(); // rellenamos el rectángulo
}
El resultado de este ejemplo:
Dibujando círculos (y arcos de circunferencia o secciones de círculo)
Sólo hay una función nueva para dibujar arcos de circunferencia (si luego se usa el método stoke()) o secciones de círculo (si luego se rellena con el método fill()). Método es otra forma de llamar a las funciones de una variable, en este caso las funciones stroke() y fill() de la variable ctx (contexto del canvas):
- arc(x,y,r,start,stop): x e y son las coordenadas del centro, r el radio, start el ángulo de inicio del arco (en radianes) y stop el ángulo final del arco (en radianes).
function draw(){
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);// centro en 95,50, radio 40,
// arco desde 0 radianes a 2*pi, que es la circunferencia completa
ctx.stroke(); // para dibujar la linea, negra por defecto.
ctx.fillStyle = 'rgb(0,255,0)'; // color de relleno verde
ctx.fill(); // lo rellenamos.
}
El resultado de este ejemplo sería:
Hay que tener en cuenta que el ángulo 0 radianes se correspondería con el este si hubiese una rosa de los vientos dibujada, y que el ángulo crece a partir de ese punto en el sentido de las agujas del reloj (sentido horario):
Escribir texto en el canvas
Esto puede resultar muy útil. Para escribir hay que definir las propiedades del texto y luego escribir el texto en el canvas, pudiendo elegirse entre escribir el texto relleno o sólo el trazo exterior. Las funciones son:
- font("propiedades del texto"): donde propiedades del texto es un estilo a la manera de CSS. Por ejemplo se puede definir tamaño y tipo de fuente. Por ejemplo "15px Arial"
- fillText(texto, x, y): dibuja el texto relleno a partir de las posiciones x,y del canvas.
- strokeText(texto, x, y): dibuja sólo el trazo exterior del texto a partir de las posiciones x, y el canvas.
function draw(){
ctx.font="15px Arial";
ctx.fillText("Hola Mundo!",0,15);//como la fuente es de 15 píxeles
// el texto aparece a partir de la esquina superior izquierda.
ctx.font="30px Arial";// aumentamos el tamaño de la fuente
// para que se aprecie que strokeText sólo pinta el borde
ctx.strokeText("Hola Mundo 2!", 0, 75); // sólo trazo.
}
Y el resultado:
Incluir imágenes en el canvas
Esta es una de las funciones más útiles del canvas y por ello le vamos a dedicar un post completo específicamente para ello.
