Rough.js ručno nacrtanu grafiku s platnom i SVG-om

Nevjerojatno je vidjeti koliko je web došao dinamički elementi kao što su SVG u pregledniku. Možete dizajnirati sve od prilagođene animacije do HTML5 igre s pravim knjižnicama.

Jedna od najnovijih knjižnica vrijednih testiranja je Rough.js. To je skriptu za generiranje besplatne grafike trenutno u beta fazi radi na platnu i SVG elementima.

Možete izraditi prilagođene ikone, stupčaste grafikone, gotovo sve što želite u kodu. I, konačni rezultat poprima predivan rukom izvučeni osjećaj.

Od ovog pisanja, Rough.js je još uvijek u v0.1 beta, tako da možda nije spreman za web-lokaciju uživo. Ali to je dokaz web standardi brzo napreduju i ulazimo u doba u kojem je takvo što moguće.

Uzmite za primjer ovo traka za napredak generirani putem Rough.js. Ako kliknete “Početak” gumb ćete ga primijetiti pokreće prilagođenu animaciju da doista izgleda rukom. Koristi SVG linije s unaprijed definiranim uzorcima stvoriti klimav učinak koji izgleda istinski prirodno.

Na glavnoj GitHub stranici pronaći ćete popis odjeljaka mnogo primjera Rough.js u akciji.

Sve ovo dolaze s uzorcima koda i trebao bi biti prilično lako preraditi za bilo koju web stranicu. Sve što trebate je skriptna datoteka Rough.js i malo strpljenja da se zabrljate s JavaScriptom.

Evo jednog isječak uzorka pokazati kako stvorite pravokutnik u kodu:

 var grubo = novo RoughCanvas (document.getElementById ('myCanvas'), 400, 200); grubi pravokutnik (10, 10, 200, 200); // x, y, širina, visina 

Prilično jednostavna kada shvatite kod, ali vjerojatno nije najintuitivnija skripta za početnike.

Ako želite više isječaka koda i uzoraka demoa pogledajte početnu stranicu Rough.js. To je savršeno mjesto za početak učenja i pronalaženje isječaka koda koje možete preraditi.

Također, ako imate pitanja ili prijedloge za dodatne značajke, možete poslati poruku kreatoru Rough.js na Twitteru @preetster.