DesarrolloLibre

Desarrollo Web, Android y mucho más

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

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un pulso con CSS

Creando un pulso con CSS

Un waffle con CSS

Un waffle con CSS

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

Geolocalización con JavaScript

Geolocalización con JavaScript

Con la geolocalización podemos conocer la ubicación geográfica del usuario.

Andrés Cruz 01-09-2013

Los mejores plugin WYSIWYG para JavaScript

Los mejores plugin WYSIWYG para JavaScript

Se presentan algunos plugins gratuitos WYSIWYG para JavaScript que no son más que una interfaz que permite dar formato al texto introducido mediante HTML; en esencia permite enriquecer el texto introducido mediante un procesador de texto.

Andrés Cruz 28-03-2016

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 15-10-2015