Trabajar con Canvas HTML5 con una sintaxis similar a la de jQuery

CanvasQuery es una biblioteca escrita con JavaScript para la manipulación del elemento HTML Canvas, que como principal ventaja cuenta con una sintaxis muy similar a la del framework jQuery, facilitando considerablemente su implementación.

La biblioteca completa es muy liviana, apenas unos 8kb en su versión de desarrollo comprimida mediante gzip y unos 6kb en su versión de producción.

Un detalle interesante es que el proyecto esta preparado para ser utilizado con plugins, esta capacidad le permite ampliar su repertorio de posibilidades de una manera sencilla.

En la sección de ejemplos van a encontrar varias demostraciones de uso. Me sorprendió bastante la capacidad que tiene el proyecto para colorizar imágenes, las mismas se definen con un determinado patrón para luego, y con apenas unas lineas de código, aplicarles un color.

Ejemplo de uso:

Un pequeño ejemplo sobre como dibujar, pintar y darle un efecto blur a un elemento. Como se puede apreciar la sintaxis es prácticamente la misma que la utilizada por jQuery.

cq(640, 480)
  .drawImage(image, 0, 0)
  .fillStyle("#ff0000")
  .fillRect(64, 64, 32, 32)
  .blur()
  .appendTo("body");

La documentación de CanvasQuery es breve y concisa, que su sintaxis sea idéntica a la de jQuery es una ventaja enorme para aquellas personas que nos estamos iniciando en el mundo del elemento HTML5 Canvas.

Web: CanvasQuery

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas