Rough.js gør håndtegnet grafik med lærred og SVG

Det er fantastisk at se, hvor langt internettet er kommet med dynamiske elementer såsom in-browser SVGs. Du kan designe alt fra brugerdefinerede animationer til HTML5 spil med de rigtige biblioteker.

Et af de nyeste biblioteker værd at teste er Rough.js. Det er en gratis grafik generation script i øjeblikket i beta det arbejder på lærred og SVG elementer.

Du kan bygge brugerdefinerede ikoner, bargrafer, stort set alt, hvad du vil have alt i kode. Og det endelige resultat tager en smuk håndtegnet følelse.

Med denne skrivning er Rough.js stadig i v0.1 beta, så det Må ikke være klar til en live produktions hjemmeside. Men det er et bevis på webstandarder går hurtigt fremad og vi går ind i en alder hvor denne slags ting er muligt.

Tag for eksempel dette statuslinje genereret gennem Rough.js. Hvis du klikker på “Start” knappen vil du bemærke det kører en brugerdefineret animation at ser virkelig håndtegnet ud. Det bruger SVG linjer med foruddefinerede mønstre at skabe en wobbly effekt, der ser virkelig naturlig ud.

På den vigtigste GitHub side finder du en sektionsoversigt mange eksempler på Rough.js i aktion.

Alle disse komme med kodeprøver og burde være ret nemt at omarbejde for enhver hjemmeside. Alt du behøver er Rough.js-scriptfilen og lidt tålmodighed til at røre med JavaScript.

Her er en prøveuddrag demonstrerer hvordan Opret et rektangel i kode:

 var grov = ny RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, bredde, højde 

Ganske enkelt, når du forstår koden, men nok ikke det mest intuitive script til begyndere.

Hvis du vil have flere kodestykker og prøve demoer tjek Rough.js hjemmeside. Det er det perfekte sted at begynde at lære og finde kodeuddrag, du kan omarbejde.

Hvis du har spørgsmål eller forslag til yderligere funktioner, kan du også beskrive Rough.js-skaberen på Twitter @preetster.