Rough.js hace gráficos dibujados a mano con lienzo y SVG

Es asombroso ver hasta dónde ha llegado la web. elementos dinámicos como SVGs en el navegador. Puedes diseñar todo desde animaciones personalizadas a Juegos HTML5 con las bibliotecas adecuadas.

Una de las bibliotecas más nuevas que vale la pena probar es Rough.js. Es un script de generación de gráficos gratis actualmente en beta que Obras sobre lienzo y elementos SVG..

Puedes crear íconos personalizados, gráficos de barras, casi cualquier cosa que desees, todo en código. Y, el resultado final. adquiere un magnífico sentimiento dibujado a mano.

A partir de este escrito, Rough.js todavía está en v0.1 beta, por lo que Puede que no esté listo para un sitio web de producción en vivo.. Pero es una prueba de que los estándares web están progresando rápidamente y estamos entrando en una era donde este tipo de cosas es posible.

Tomemos por ejemplo esto barra de progreso generado a través de Rough.js. Si hace clic en el “comienzo” botón lo notarás ejecuta una animación personalizada ese realmente parece dibujado a mano. Esta usando Líneas SVG con patrones predefinidos. para crear un efecto tambaleante que parece verdaderamente natural.

En la página principal de GitHub, encontrará una lista de secciones Muchos ejemplos de Rough.js en acción..

Todos estos vienen con ejemplos de código y debe ser Bastante fácil de retrabajar para cualquier sitio web.. Todo lo que necesita es el archivo de script Rough.js y algo de paciencia para jugar con el JavaScript.

Aquí está un fragmento de muestra demostrando cómo crear un rectángulo en el código:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); áspero.rectangle (10, 10, 200, 200); // x, y, ancho, alto 

Bastante simple una vez que entiendes el código pero probablemente no sea el script más intuitivo para principiantes.

Si quieres más fragmentos de código y demostraciones de muestra Echa un vistazo a la página web de Rough.js. Es el lugar perfecto para comenzar a aprender y encontrar fragmentos de código que puede volver a trabajar..

Además, si tiene preguntas o sugerencias para funciones adicionales, puede enviar un mensaje al creador de Rough.js en Twitter @preetster.