Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Las mejores bibliotecas de lienzos gratuitas en JavaScript

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

El elemento canvas (lienzo) se introdujo en HTML5 como un lugar para dibujar gráficos con JavaScript. Puedes usarlo para hacer muchas cosas, por ejemplo editar imágenes, dibujar formas simples o complicadas, así como crear animaciones.

En este artículo veremos algunas de las mejores bibliotecas de lienzos gratuitas en JavaScript. Estas pueden utilizarse para visualizar datos o crear animaciones simples y sistemas de partículas. Comencemos.

1. D3.js

La biblioteca D3.js es una de las opciones más populares cuando se trata de visualizar cualquier tipo de datos. Utiliza funciones de SVG, Canvas y HTML normal para crear increíbles gráficos y tablas. La biblioteca en sí misma prácticamente no impone restricciones en cuanto a la forma en la que puede presentar los datos a tus usuarios. Puedes usarla para crear gráficos de carrera de barras, gráficos de área o mapas de árbol. Si puedes imaginar una forma nueva y emocionante de presentar datos, lo más probable es que puedas crearla con D3.js.

Una de las cosas que podrían disuadirte de usar D3.js es su compleja curva de aprendizaje. Consta de más de treinta módulos y más de mil métodos. Esto puede resultar muy intimidante. Sin embargo, hay muchos tutoriales y documentación detallada para aprender todo sobre la biblioteca.

El dinámico árbol de la imagen anterior fue creado por Artem Zubkof con D3.js en un lienzo. Puedes ver muchos ejemplos más en la página principal de D3.

2. Particles.js

La biblioteca Particles.js es perfecta para las personas que quieran crear sistemas de partículas basados en lienzos. Es ligera y no tiene dependencias. Necesitas alrededor de media hora para familiarizarte con todas las funciones de la biblioteca. Después de eso, simplemente puedes jugar con los valores de diferentes parámetros para ver cuáles crean el sistema de partículas que te guste.

La biblioteca te proporciona control sobre muchos parámetros. Puede especificar el color y la cantidad total de partículas. Las partículas de diferentes formas, como círculos y triángulos, son fáciles de crear. Incluso puedes usar imágenes como partículas. Es posible lograr que las partículas sean interactivas y que respondan a la presencia de las otras partículas o a tus acciones, como al hacer clic o al colocar el cursor sobre ellas.

Hemos podido crear este fondo estrellado con unas pocas líneas de código en Particles.js. Puedes leer este tutorial introductorio para comenzar a trabajar con la biblioteca.

3. Matter-js

La biblioteca matter-js es un motor de física 2D de cuerpo rígido escrito en JavaScript. Puedes usarlo para emular sistemas físicos simples en el lienzo. Viene con muchos módulos para ayudarte a lograr diferentes tareas.

Puedes crear cuerpos rígidos simples o cuerpos compuestos y darles propiedades como masa, área y densidad, etcétera. También tienes control sobre la gravedad y la fricción en el mundo que generes. Es compatible con colisiones tanto elásticas como inelásticas. Una cosa que quizá notes al jugar con la biblioteca durante mucho tiempo es que el sistema sigue perdiendo un poco de energía con el tiempo. Este puede o no ser un factor decisivo para ti. La biblioteca te da la opción de usar su propio renderizador integrado, o bien seguir tu propio método.

Intenta hacer clic en los botones Force (Fuerza) para mover la pelota. Puedes reducir la fricción en el sistema presionando el botón Reduce Friction (Reducir fricción).

La demostración anterior en CodePen ha sido extraída de uno de nuestros tutoriales introductorios sobre matter-js, que te ofrece una descripción completa de la biblioteca. Este te ayudará a comenzar rápidamente, ya que explica diferentes métodos y propiedades que tienes a tu disposición al usar este motor.

4. Paper.js

Paper.js es una biblioteca de código abierto basada en JavaScript que te brinda las herramientas para crear gráficos asombrosos en el lienzo. La biblioteca te da la opción de usar su propia versión de JavaScript, llamada PaperScript. Es similar a JavaScript, pero facilita un poco el trabajo con la biblioteca. Puedes continuar usando JavaScript puro si no quieres usar PaperScript.

La biblioteca tiene muchas funciones. Puedes trabajar con capas anidadas, grupos, trazados y trazados compuestos, entre otras cosas. También admite matemáticas simples para sus objetos Point y Size, lo que facilita los cálculos. Existen modos de fusión disponibles para posibilitar la interacción entre diferentes capas.

Intenta hacer clic y arrastrar sobre el lienzo en la demostración de CodePen de arriba. Deberías ver algunos círculos rosas en el camino que seguiste con el ratón. El tamaño de los círculos dependerá de la velocidad de tu movimiento. Este tutorial explica cómo puedes agregar la interacción del usuario basada en eventos para el ratón y el teclado con Paper.js.

5. Fabric.js

La biblioteca Fabric.js te permite dibujar formas simples en el lienzo con facilidad, por ejemplo círculos, rectángulos y otros polígonos. No estás limitado a formas simples. También puedes añadir imágenes y formas más complicadas al lienzo.

Una vez que las imágenes y formas hayan sido dibujadas en el lienzo, la biblioteca te permite cambiar sus escalas, girarlas y moverlas con el ratón. También es posible controlar atributos como el color y la opacidad de las formas después de haberlas dibujado. La biblioteca emplea una serie de técnicas, como la superposición de lienzos, para hacer las cosas lo más rápidas y eficientes que sea posible.

El CodePen anterior de Arkellys es un excelente ejemplo de la funcionalidad proporcionada por Fabric.js. Haz clic en el cuadrado, en el círculo o en el triángulo en la esquina superior derecha para dibujarlos en el lienzo. Después de eso, puedes arrastrarlos, cambiar su escala y girarlos con el ratón.

6. Chart.js

La biblioteca Chart.js es una excelente alternativa para las personas que quieran crear tipos comunes de gráficos con la ayuda de una biblioteca de lienzos fácil de usar. Hay ocho tipos de gráficos diferentes disponibles para que puedas visualizar tus datos. Entre estos se encuentran los gráficos de líneas, los gráficos de barras y los gráficos circulares de uso común, junto con otros como los gráficos de radar y los de burbujas.

Hay muchas opciones de personalización para dibujar los gráficos y la escala. También puedes actualizar colores, cambiar los datos o agregar nuevos conjuntos de datos y, al mismo tiempo, crear transiciones animadas fluidas. Tienes control total sobre los elementos visuales del gráfico.

El gráfico de barras anterior fue creado siguiendo las instrucciones de este tutorial introductorio sobre gráficos de líneas y de barras en Chart.js.

7. Two.js

La biblioteca Two.js es una excelente solución para las personas que quieran dibujar y animar objetos bidimensionales. Es independiente del renderizado, por lo que puedes usar la misma API para dibujar con SVG, lienzos y WebGL.

La biblioteca Two.js realiza un seguimiento de las cosas que hayas dibujado en el lienzo y te permite hacerles cambios más tarde. Esto incluye girar, cambiar la escala o trasladar esos objetos. Hay un bucle de animación incorporado en Two.js, pero también puedes integrar una biblioteca de animación de terceros fácilmente. La detallada documentación permite que los principiantes puedan comenzar a trabajar con la biblioteca con facilidad y crear algo interesante.

Intenta hacer clic dentro del CodePen anterior y comenzará a crear átomos de diferentes elementos. Cada clic seguirá agregando más electrones giratorios en la órbita y pares de protones y neutrones en el núcleo. Puedes aprender a hacer cosas así en este tutorial para principiantes de la biblioteca Two.js.

8. Editor de imágenes Toast UI

Toast UI es un editor de imágenes basado en lienzos completo que puede hacer muchas cosas, como recortar, voltear o girar imágenes. También puedes aplicar filtros para pixelar, realzar o agregar ruido a las imágenes. La biblioteca también te permite dibujar sobre las imágenes con iconos o formas simples una vez que hayan sido cargadas en el lienzo.

Toast UI Image EditorToast UI Image EditorToast UI Image Editor

El editor de imágenes Toast UI viene con 4 temas predeterminados que cargan toda la funcionalidad en forma de diferentes botones y controles.

Otra alternativa a un editor de imágenes basado en lienzos es la biblioteca CamanJS, que te brinda la libertad de diseñar tu propia interfaz de usuario desde cero. Simplemente te ofrece todas las capacidades de manipulación de imágenes, como cambiar el brillo, la intensidad, el ruido y el contraste de las imágenes. Desafortunadamente la biblioteca ya no recibe mantenimiento, pero aún así puedes considerar su uso.

Pensamientos finales

Nuestro objetivo con este artículo fue presentarte algunas bibliotecas gratuitas basadas en lienzos que pueden realizar una variedad de tareas. Hay muchas bibliotecas disponibles para dibujar y animar cosas con la ayuda de los lienzos. Puedes visualizar cualquier tipo de información o una variedad de tipos de gráficos con una biblioteca como D3.js, y también tienes la opción de simplificar las cosas con una biblioteca como Charts.js. Del mismo modo, puedes crear simulaciones basadas en la física con Matter-js, o animar formas 2D con Two.js. En nuestros otros artículos, entramos en más detalles sobre cada uno de estos casos de uso.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.