Interactuar con HTML5 Canvas

Dibujar gráficos con el elemento canvas y algo de JavaScript es relativamente sencillo, lo que convierte esta herramienta en algo tan potente es la facilidad con la que podemos añadir interacción con el ratón y el teclado

Introducción a Canvas:

Si ya has utilizado el elemento canvas, y sabes dibujar formas, lineas, texto… etc pasa al siguiente titulo.

Paso 1: El HTML

Empezaremos colocando en cualquier lugar del body nuestro elemento canvas:

<canvas id="miCanvas" width="300" height="300">Para ver el canvas usa un navegador como Google Chrome</canvas>

Lo que pongamos entre las etiquetas canvas se mostrará (Supuestamente) si el navegador no soporta canvas.

Paso 2: JavaScript básico:

<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript">
<!--
var ctx;
$(document).ready(function(){
ctx = $('#miCanvas')[0].getContext("2d");
});
-->
</script>

Me gusta mucho trabajar con jQuery, aunque se podría hacer todo perfectamente sin ello, simplifica mucho las cosas. Hasta ahora hemos insertado el elemento canvas, y lo hemos referenciado en la variable ctx (Contexto) Es importante seleccionar 2d, para hacer dibujos en 3d haré un tutorial más adelante.

Otro detalle a tener en cuenta es que hacemos la referencia al canvas una vez que el documento ha cargado, es importante hacerlo asi pues si lo hacemos antes no funcionará.

Paso 3: Algunas funciones

Algunas de las funciones básicas de dibujo son:

  • fillStyle(color), strokeStyle(color): Definen el color de lo siguiente que dibujemos
  • beginPath(): Todo lo que dibujemos a continuación formará parte de la misma forma
  • closePath(): Cierra la forma que estemos dibujando. Si el punto final y el inicial están separados los une con una linea recta.
  • fill(): Rellena la forma que hallamos dibujado con el color definido por fillStyle()
  • stroke(): Traza el contorno de la forma con el color definido por strokeStyle()
  • arc(x, y, radio, angulo inicial, angulo final, antihorario): Dibuja un arco empezando en el punto (x,y) desde ángulo inicial hasta el final.
  • moveTo(x,y): Permite hacer formas consistentes en varias partes. Se puede pensar en ello como levantar el lápiz y moverlo a otro punto del papel.
  • lineTo(x,y): Dibuja una linea desde el punto donde estemos, hasta (x,y). (Recordar que no aparecerá si no usamos stroke())
  • fillRect(x, y, ancho, alto): Dibuja un rectángulo empezando en (x,y) …
  • strokeRect(x,y,ancho,alto): Igual que fillRect, pero traza el contorno.
  • clearRect(x,y,ancho,alto): Igual que fillRect pero limpia lo que este dentro del rectángulo.

Todavía nos quedan algunas funciones ligeramente más complejas, que son las que dibujan curvas basadas en un vector. Las llamadas curvas de Bezier y las cuadráticas.

Configuración simple y algún dibujo:

Es muy importante definir algunas variables cuando trabajemos con el elemento canvas, para hacernos la vida mas simple. Os pongo lo que considero “el entorno” básico de trabajo:

<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript">
<!--
var ctx;

var WIDTH;
var HEIGHT;

var canvasMinX;
var canvasMaxX;

var canvasMinY;
var canvasMaxY;

$(document).ready(function(){
// Referencia al canvas
ctx = $('#miCanvas')[0].getContext("2d");

WIDTH = $("#miCanvas").width();
HEIGHT = $("#miCanvas").height();

canvasMinX = $("#miCanvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;

canvasMinY = $("#miCanvas").offset().top;
canvasMaxY = canvasMinY + HEIGHT;

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
});
-->
</script>

He definido las variables fuera para poder disponer de ellas en cualquier sitio. Luego en cuanto el documento esté listo les damos los valores correspondientes. Width y Height son bastante obvios. canvasMin(Max)X(Y) son los limites del elemento canvas relativos a las coordenadas de la página.

Hay que recordar que el documento tiene sus propias coordenadas, en las que se basa la posición del ratón por ejemplo, pero dentro del canvas tenemos su propio sistema de coordenadas, empezando en la esquina superior derecha también.

Finalmente he añadido la función clear() que utiliza la función clearRect() para borrar lo que haya en nuestro canvas. Es muy útil a la hora de hacer animaciones.

Añadir interacción:

Para poder interactuar son necesarias dos cosas: Por un lado necesitamos algún tipo de evento ante el que reaccionar, y alguna manera de modificar lo que aparece en nuestro canvas ante dicho evento.

Según el tipo de aplicación que estemos desarrollando, hay dos posibles escenarios. Una animación continua, y una imágen estática que cambiará cuando se de el evento.

En el primer caso tendremos que dibujar el contenido de nuestro canvas dentro de un bucle, para poder modificarlo de forma continua. Vamos a ver un ejemplo:
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript">
<!--
var ctx;

var WIDTH;
var HEIGHT;

var canvasMinX;
var canvasMaxX;

var canvasMinY;
var canvasMaxY;

var x = 0;
var y = 0;

$(document).ready(function(){
// Referencia al canvas
ctx = $('#miCanvas')[0].getContext("2d");

WIDTH = $("#miCanvas").width();
HEIGHT = $("#miCanvas").height();

canvasMinX = $("#miCanvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;

canvasMinY = $("#miCanvas").offset().top;
canvasMaxY = canvasMinY + HEIGHT;

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function draw(){
// Funcion encargada de dibujar el canvas
// Moveremos un cuadrado por la pantalla
clear();
ctx.fillStyle = 'red';
ctx.fillRect(x,y,50,50);
x += Math.random();
y += Math.random();
}
setInterval(draw, 1 );
});
-->
</script>

La función draw se ejecuta cada milisegundo, primero borra lo que haya dibujado, después redibuja el cuadrado y finalmente modifica las coordenadas.

Para añadir una interacción con el ratón vamos a hacer que cuando se haga clic con el ratón en cualquier punto del canvas, el cuadrado aparezca donde hicimos clic:
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript">
<!--
var ctx;

var WIDTH;
var HEIGHT;

var canvasMinX;
var canvasMaxX;

var canvasMinY;
var canvasMaxY;

var x = 0;
var y = 0;

$(document).ready(function(){
// Referencia al canvas
ctx = $('#miCanvas')[0].getContext("2d");

WIDTH = $("#miCanvas").width();
HEIGHT = $("#miCanvas").height();

canvasMinX = $("#miCanvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;

canvasMinY = $("#miCanvas").offset().top;
canvasMaxY = canvasMinY + HEIGHT;

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
$('canvas').click(function(event){
clear();
ctx.fillStyle = 'red';
ctx.fillRect(event.pageX - canvasMinX,event.pageY - canvasMinY,50,50);
});
});
-->
</script>

No he utilizado las coordenadas (event.pageX, event.pageY) porque son relativas al documento, y las necesitamos relativas al canvas, lo cual solucionamos con el minX y el minY.

A continuación podemos ver algunos ejemplos del canvas, en todos hay acciones que ocurren al mover o hacer clic con el ratón. En otro post explicaré como mostrar los FPS de una animación hecha en canvas:

Acerca de Chevi

Programador de Chevismo
This entry was posted in General, Programación and tagged , , , , . Bookmark the permalink.

Los comentarios están cerrados.