Rough.js rende grafica disegnata a mano con tela e SVG

È incredibile vedere fino a che punto è arrivato il web elementi dinamici ad esempio SVG nel browser. Puoi progettare tutto da animazioni personalizzate a Giochi HTML5 con le librerie giuste.

Una delle più nuove librerie che meriti di essere testata Rough.js. È un script di generazione grafica gratuito attualmente in beta lavora su canvas e elementi SVG.

È possibile creare icone personalizzate, grafici a barre, praticamente tutto ciò che si desidera tutto in codice. E il risultato finale assume una splendida sensazione disegnata a mano.

Al momento della stesura di questo, Rough.js è ancora in v0.1 beta, quindi potrebbe non essere pronto per un sito web di produzione live. Ma è una prova gli standard web stanno procedendo velocemente e stiamo entrando in un'epoca in cui questo tipo di cose è possibile.

Prendi ad esempio questo barra di avanzamento generato attraverso Rough.js. Se si fa clic sul “Inizio” pulsante lo noterai esegue un'animazione personalizzata quello sembra davvero disegnato a mano. Sta usando Linee SVG con pattern predefiniti per creare un effetto traballante che sembra davvero naturale.

Nella pagina principale di GitHub, troverai un elenco di sezioni molti esempi di Rough.js in azione.

Tutti questi vieni con esempi di codice e dovrebbe essere abbastanza facile da rielaborare per qualsiasi sito web. Tutto ciò di cui hai bisogno è il file di script Rough.js e un po 'di pazienza nel pasticciare con JavaScript.

Ecco un sample snippet dimostrando come crea un rettangolo nel codice:

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

Abbastanza semplice una volta capito il codice ma probabilmente non lo script più intuitivo per i principianti.

Se vuoi più frammenti di codice e demo di esempio controlla la homepage di Rough.js. È il posto perfetto per iniziare a imparare e trovare frammenti di codice che puoi rielaborare.

Inoltre, se hai domande o suggerimenti per funzionalità aggiuntive, puoi inviare un messaggio al creatore di Rough.js su Twitter @preetster.