Ver ejemplo

Hasta ahora hemos vistos varios experimentos empleando Canvas y JavaScript en los cuales realizamos animaciones variadas, pero estas no dependen de ningún otro agente para variar su comportamiento:

• ¿CÓMO CREAR UN EFECTO DE ONDA CON CANVAS Y JAVASCRIPT?
• ¿CÓMO CREAR UN PUNTO LUMINOSO CON JAVASCRIPT Y CANVAS?
• CREANDO PARTÍCULAS CON JAVASCRIPT Y CANVAS
• CÓMO CREAR ANILLOS DE CIRCULOS EN JAVASCRIPT Y CANVAS

En esta entrada veremos un pequeño experimento en donde interactuamos con el Canvas mediante los eventos de teclados específicamente emplearemos las flechas de direcciones del teclado.

Realizar animaciones con JavaScript y Canvas las cuales dependen de agentes externos como teclado o ratón son muy sencillas.

Como podrás imaginar al introducir el concepto de animación se está insinuando el uso de la función requestAnimationFrame() que permite realizar animaciones con el Canvas de una manera eficiente; aunque debes de tener en consideración la compatibilidad con los antiguos navegadores al formar parte de la API de HTML5; puedes obtener más información en: EL SECRETO DE LAS ANIMACIONES EN JAVASCRIPT.

Empezando con el experimento con Canvas, animaciones y eventos de teclado (JavaScript)

El experimento consiste en mover un pequeño círculo por todo el Canvas dejando una leve estela a su paso mediante las flechas de direcciones del teclado.

Inicializando el evento de teclado

Asociaremos el evento al document aunque puedes asociarlo también al Canvas si lo prefieres:

document.addEventListener('keydown', function(e) {    }, false);

En el escuchador 'keydown' asociaremos el código de las teclas con las cuales nos interesa que interactúe el Canvas y actualizaremos variables que son tomadas al momento de redibujar el círculo mediante la función requestAnimationFrame().

Puedes buscar los códigos asociados al pulsar de las teclas de direcciones o simplemente coloca un alert o console.log y consulta el código al momento de presionar el teclado.

Una vez que nos hagamos con los códigos podemos formar los siguientes condicionales para aumentar/decrementar una serie de variables:

    document.addEventListener('keydown', function (e) {
        lastDownTarget = event.target;

        if (e.keyCode === 37) {
            x-=v;
        }

        if (e.keyCode === 38) {
            y-=v;
        }

        if (e.keyCode === 39) {
            x+=v;
        }

        if (e.keyCode === 40) {
            y+=v;
        }

    }, false);

• Las variables x y y son globales y representa la posición del círculo en un momento dado; por defecto, ambas se encuentran inicializadas en cero.
• La variable v es un valor global y constante que expresa la velocidad del círculo al desplazarse.

x representa la posición del círculo en el eje de las X y y representa la posición del círculo en el eje de las Y.

Pintando en el Canvas

Hasta el momento hemos visto cómo actualizar un par de variables mediante los eventos de teclado; dichas variables serán empleadas para dibujar el círculo en una posición determinada, ahora veremos cómo dibujar el círculo empleando las posiciones:

    function draw() {
        $.fillStyle = 'hsla(' + (x*y)/100 + ',100%, 50%, 1)';
        $.beginPath();
        $.arc(x, y, 8, 0, dosPi);
        $.fill();
    }

Muy sencillo, simplemente consultamos las variables globales x y y que actualizamos en otra función.

En otras palabras; al actualizar las variables mediante los eventos de teclado, también deben ser actualizadas al momento de repintar el Canvas mediante la función requestAnimationFrame():

    function go() {
     $.fillStyle = 'hsla(0,0%,0%,.08)';
     $.fillRect(0, 0, w, h);

     if (x <= 0)
         x = 0;
     if (y <= 0)
         y = 0;

     if (x >= w)
         x = w;
     if (y >= h)
         y = h;

     draw();

     window.requestAnimationFrame(go);
 }

El código completo del experimento Canvas:

    var c = document.getElementById('canv');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var $ = c.getContext('2d');
    var x = w/2;
    var y = h/2;
    var dosPi = Math.PI * 2;
    var v = 5;

    window.addEventListener('resize', function () {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
    }, false);

    function draw() {
        $.fillStyle = 'hsla(' + (x*y)/100 + ',100%, 50%, 1)';
        $.beginPath();
        $.arc(x, y, 8, 0, dosPi);
        $.fill();
    }

    function go() {
        $.fillStyle = 'hsla(0,0%,0%,.08)';
        $.fillRect(0, 0, w, h);

        if (x <= 0)
            x = 0;
        if (y <= 0)
            y = 0;

        if (x >= w)
            x = w;
        if (y >= h)
            y = h;

        draw();

        window.requestAnimationFrame(go);
    }
    go();

    document.addEventListener('keydown', function (e) {
        lastDownTarget = event.target;

        if (e.keyCode === 37) {
            x-=v;
        }

        if (e.keyCode === 38) {
            y-=v;
        }

        if (e.keyCode === 39) {
            x+=v;
        }

        if (e.keyCode === 40) {
            y+=v;
        }

    }, false);

Y para no hacer extremadamente larga esta entrada, lo dejaremos hasta aquí; en posteriores entradas veremos como interactuar un poco más con el Canvas mediante los eventos de teclado.

Puedes probar el experimento en el siguiente enlace:

Ver ejemplo