Rough.js Gjør håndtegnet grafikk med lærred og SVG

Det er utrolig å se hvor langt nettet har kommet med dynamiske elementer som for eksempel SVGer i nettleseren. Du kan designe alt fra egendefinerte animasjoner til HTML5 spill med de riktige bibliotekene.

En av de nyeste bibliotekene verdt å teste er Rough.js. Det er en gratis grafikk generering skript for tiden i beta det jobber på lerret og SVG elementer.

Du kan bygge egendefinerte ikoner, bargrafer, stort sett alt du vil ha alt i kode. Og det endelige resultatet tar på seg en nydelig håndtegnet følelse.

Som i denne skrivingen er Rough.js fortsatt i v0.1 beta, så det Kan ikke være klar for en live produksjon nettsted. Men det er et bevis på at Internett-standarder går fort og vi går inn i en alder der denne typen ting er mulig.

Ta for eksempel dette fremdriftslinje generert gjennom Rough.js. Hvis du klikker på “Start” knappen vil du legge merke til det kjører en tilpasset animasjon at Ser virkelig ut håndtegnet. Det bruker SVG linjer med forhåndsdefinerte mønstre å skape en wobbly effekt som ser virkelig naturlig ut.

På hovedgitHub-siden finner du en seksjonsliste mange eksempler på Rough.js i aksjon.

Alle disse kom med kodeprøver og bør være ganske enkelt å omarbeide for et hvilket som helst nettsted. Alt du trenger er Rough.js-skriptfilen og litt tålmodighet for å rote med JavaScript.

Her er en prøveutdrag viser hvordan lag et rektangel i kode:

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

Ganske enkelt når du forstår koden, men sannsynligvis ikke det mest intuitive skriptet for nybegynnere.

Hvis du vil ha flere kodestykker og prøve demoer sjekk ut Rough.js hjemmeside. Det er det perfekte stedet å begynne å lære og å finne kodestykker du kan omarbeide.

Også, hvis du har spørsmål eller forslag til tilleggsfunksjoner, kan du sende beskjed til Rough.js-skaperen på Twitter @preetster.