Rough.js crée des graphiques dessinés à la main avec Canvas et SVG

C'est incroyable de voir jusqu'où le Web est venu avec éléments dynamiques tel que SVG dans le navigateur. Vous pouvez tout concevoir de animations personnalisées à Jeux HTML5 avec les bonnes bibliothèques.

Une des bibliothèques les plus récentes à tester est Rough.js. C'est un script de génération de graphiques gratuit actuellement en version bêta travaille sur la toile et les éléments SVG.

Vous pouvez créer des icônes personnalisées, des graphiques à barres, pratiquement tout ce que vous voulez, tout en code. Et le résultat final prend un magnifique sentiment dessiné à la main.

A ce jour, Rough.js est toujours en v0.1 beta, donc peut ne pas être prêt pour un site de production en direct. Mais c'est une preuve que les normes Web progressent rapidement et nous entrons dans une époque où ce genre de choses est possible.

Prenons par exemple cette barre de progression généré par Rough.js. Si vous cliquez sur le “Début” bouton tu le remarqueras exécute une animation personnalisée cette semble vraiment dessiné à la main. C'est en utilisant Lignes SVG avec des motifs prédéfinis pour créer un effet bancal qui a l'air vraiment naturel.

Sur la page principale de GitHub, vous trouverez une liste de sections de nombreux exemples de Rough.js en action.

Tous ces venir avec des exemples de code et devrait être assez facile à retravailler pour n'importe quel site web. Tout ce dont vous avez besoin est le fichier de script Rough.js et de la patience pour jouer avec JavaScript.

Voici un échantillon extrait démontrer comment créer un rectangle dans le code:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rugueuse rectangle (10, 10, 200, 200); // x, y, largeur, hauteur 

Assez simple une fois que vous avez compris le code, mais probablement pas le script le plus intuitif pour les débutants.

Si vous voulez plus d'extraits de code et des exemples de démos consultez la page d'accueil Rough.js. C'est l'endroit idéal pour commencer à apprendre et pour trouver des extraits de code que vous pouvez retravailler..

De plus, si vous avez des questions ou des suggestions concernant des fonctionnalités supplémentaires, vous pouvez contacter le créateur de Rough.js sur Twitter @preetster..