canvas en htm5

Por alguna razón (quizás el apoyo inicial que diera Steve Jobs), el HTML5 parece se impondrá en términos de programación web, desplazando a Flash, que digan lo que digan sus detractores, tiene aún una amplia base instalada. La razón de esto parece ser el canvas, el componente que permite dibujar en la pantalla de una página web como si fuese un lienzo para pintores, lo que permite que se puedan incorporar fácilmente gráficas y animaciones. Así que no es casualidad que hayan mejorado su canvas.

La mayoría de las nuevas características parecieran que califican en las más usadas. Por ejemplo, ahora hay un comando para dibujar una elipse (y desde luego, un círculo). Ya no se necesita utilizar curvas de Bezier ni ninguna geometría extraña y de hecho, jamás se ha necesitado esto para hacer elipses. Hay un algoritmo muy conocido de Bresenham para eso (así que la verdad, no entiendo cómo es que antes no estaba esta función).

Otro agregado es la primitiva path, que permite crear la trayectoria de un objeto y dibujarla en canvas. Esto significa que ahora se pueden mantener trayectorias múltiples (antes sólo se permitía una). Además, es posible usar el mini lenguaje SVG para crear una trayectoria, por ejemplo ‘M 100,100 H 50 V 50’, etcétera (parece similar a las gráficas de la tortuga de Logo), y hacer transformaciones sobre trayectorias ya definidas de esta manera.

Las trayectorias también se pueden dibujar también como líneas punteadas y se les puede asignar texto, lo que parece normal en un paquete de gráficas estándar.

Tiene la capacidad de definir regiones llamadas hit, que permiten especificar un área determinada en la pantalla del canvas para responder a los eventos del usuario. En otras palabras, se pueden definir puntos ‘calientes’ dentro de una gráfica. Se define una trayectoria y una región de hit (HitRegion) y listo.

Hay otras mejoras menores, como más métricas en la instrucción MeasureText y la capacidad de transformar un patrón. Sólo falta ver que los navegadores implementen esto en sus versiones de HTML5.

Fuente: Añadidos al Canvas en el API HTML5.

Enlaces Patrocinados
Comentarios