DesarrolloLibre

Desarrollo Web, Android, juegos 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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Metaballs con JavaScript

Metaballs con JavaScript

Algunos artículos que te pueden interesar

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

Uso básico del Canvas en HTML

Uso básico del Canvas en HTML

El elemento canvas nos permite especificar un área de la página en donde se puede dibujar crear todo tipo de gráficos simples o complejos a partir de primitivas básicas como círculos, óvalos, rectángulos líneas, polígonos, texto, etc.

Andrés Cruz 25-01-2016

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015