Curvas en caminos de Canvas del HTML 5

Hasta ahora en el manual de canvas del HTML 5  vamos a aprender un poco más en la materia aprendiendo a dibujar caminos con curvas.

En principio las librerías de funciones para dibujo en el canvas permite tres métodos de para hacer trazos en curva, basados en funciones matemáticas para expresar curvas de distintos tipos:

Arcos: 

Nos permiten dibujar circunferencias o segmentos de circunferencias, lo que se conoce como arcos. Lo conseguimos con el método arc() enviando una serie de parámetros que veremos más adelante.

Curvas cuadráticas: 

Es una manera de especificar una curva en la que tenemos un punto de inicio, un punto de fin y un tercer punto que indica hacia qué parte se curvará la línea. Esta curva veremos que es fácil de entender y que nos servirá para hacer esquinas redondeadas, entre otras muchas cosas.

Curvas Bezier: 

Es una manera matemática de expresar una curva por medio de cuatro puntos. El punto de inicio, el de fin y dos puntos que indicarán hacia dónde se curvará la primera y segunda mitad de la línea. Es una curva un poco más compleja de entender, pero posiblemente ya hayamos experimentado con este tipo de curvas en programas de diseño como Photoshop o Ilustrator, lo que podrá ayudar un poco a comprenderla.

La verdad es que para hacer todas estas curvas hay que saber un poco de matemáticas y habría que hacer cálculos para poder ajustarlas a nuestras necesidades. Digamos que todas las fórmulas están pensadas para el dibujo técnico y no artístico, por eso quizás un matemático tendría más soltura que un artista para dibujar cosas en el lienzo del canvas.

No obstante, no podemos dejar que pensar que el dibujo en canvas es un proceso informatizado y como estamos diseñando a nivel de lenguaje de programación, no queda otra cosa que adaptarse a las fórmulas matemáticas implementadas para hacer curvas. Más adelante veremos otras maneras de solventar estos temas, como la utilización de imágenes, que podemos importar y "pegar" en el canvas, a partir de archivos gráficos creados con cualquier programa como Photoshop.

En los siguientes artículos veremos con detalle cada uno de estos tres tipos de curvas con sus ejemplos. Podemos comenzar conociendo las curvas en arcos.

Enlace: enlace