Canvas 2D: Documentación, Objetos Path2D, Hit Regions

12 abril, 2015 23:26 por

Ésta es una traducción del artículo original en el blog de Mozilla Hacks. Traducción por Carlos Chocobar.

Durante el año pasado y con la ayuda del equipo de Plataforma Web de Adobe (Adobe Web Platform) fueron implementados en Firefox y otros navegadores recientes un par de características nuevas  de HTML Canvas 2D. En MDN, la documentación para canvas 2D tuvo una importante actualización para reflejar el estado actual del estándar de canvas y la implementación del navegador. Vamos a ver qué es lo nuevo y cómo lo puedes utilizar para mejorar tus gráficos canvas y contenido de juegos.

Objetos Path2D

La nueva API de Path2D (disponible desde Firefox 31+) te deja guardar rutas, lo que simplifica tu código de dibujo de tu canvas y lo hace más veloz. El constructor proporciona tres maneras de crear un objeto Path2D:

new Path2D();      // objeto de ruta vacío
new Path2D(path);  // copia de otra ruta
new Path2D(d);     // ruta de datos de ruta SVG

La tercera versión, que para construir toma datos de ruta SVG, es especialmente práctica. Ahora puedes re-utilizar tus rutas SVG para dibujar las mismas figuras directamente en un canvas:

var p = new Path2D(“M10  10  h  80  v  80  h  -80  z”);

Al construir un objeto de ruta vacío, puedes utilizar los métodos de rutas habituales, los que te pueden ser familiares al usarlos directamente en el contexto CanvasRenderingContext2D.

// construir un círculo
var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2*Math.PI);
// dibujar el círculo en el contexto ctx
ctx.stroke(circle);

Para poder dibujar la ruta sobre el canvas, se han actualizado varias APIs del contexto para tomar una ruta opcional Path2D:

Hit regions

Comenzando con Firefox 32, se ha agregado un soporte experimental para hit regions (regiones de impacto). Necesitas cambiar la preferencia canvas.hitregions.enabled a true para poder probarlas. Las hit regions proveen una manera mucho más fácil de detectar si el mouse está en un área particular, sin depender de las revisiones manuales de las coordenadas, lo que puede ser realmente difícil de comprobar si existen formas complejas. La API de Hit Regions es bastante sencilla:

CanvasRenderingContext2D.addHitRegion()
Agrega una hit región a los canvas.
CanvasRenderingContext2D.removeHitRegion()
Quita la hit región con la id especificada del canvas.
CanvasRenderingContext2D.clearHitRegions()
Quita todas las hit regions del canvas.

El método addHitRegion agrega una hit region a la actual ruta o a una ruta Path2D. La interfaz MouseEvent se extiendió con una propiedad region, que puedes utilizar para comprobar si el puntero ha accedido o no a las regiones.

Revisa el código de ejemplo en MDN para verlo en acción (y asegúrate de activar las banderas/preferencias por lo menos en Firefox y Chrome).

Anillos de enfoque

También en Firefox 32, se hizo disponible la propiedad drawFocusIfNeeded(element) sin un interruptor de preferencia. Esta API te permite dibujar anillos de enfoques en un canvas, si el elemento provisto dentro del elemento <canvas></canvas> adquiere enfoque. Si el elemento se enfoca (por ejemplo cuando se tabula a través de la página que contiene el canvas), la representación del píxel / tamaño de ese elemento en el canvas puede dibujar un anillo de enfoque para indicar el enfoque actual.

Filtros CSS/SVG expuestos a Canvas

Aunque todavía detrás de una preferencia (canvas.filters.enabled), y no en las últimas especificaciones de canvas (pero se espera que se agregue), Firefox 35 adquirió soporte para filtros en el contexto de renderizado de canvas. La sintaxis es la misma que en la propiedad de filtro CSS.

Misc

Documentación

Si deseas leer más acercas de los gráficos de Canvas 2D, revisa el tutorial de canvas en MDN, que te guiará a través de la API de canvas. Un buen marcador es también la gran interfaz CanvasRenderingContext2D, que a menudo la vas a utilizar cuando trabajes con Canvas.

The following two tabs change content below.

jorgev

AMO Product Manager at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

  • ¡Participa!

    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa