DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
07-12-2015

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:

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);
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 = 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 = 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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Calendario de cubo

Calendario de cubo

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Algunos artículos que te pueden interesar

¿Cómo agregar markers (POIs) en Google Maps?

¿Cómo agregar markers (POIs) en Google Maps?

Utilizando la API de Google Maps para mostrar la ubicación del usuario.

Andrés Cruz 01-05-2014

Detectando la orientación del dispositivo con el API de javaScript

Detectando la orientación del dispositivo con el API de javaScript

Con esta API podemos obtener información sobre la orientación de un dispositivo, en específico.

Andrés Cruz 08-04-2014

Recortes de imágenes con HTML5 y jQuery

Recortes de imágenes con HTML5 y jQuery

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery.

Andrés Cruz 07-05-2014