Rough.js vytváří ručně kreslenou grafiku s plátnem a SVG

Je úžasné vidět, jak daleko web přišel dynamické prvky jako v SVG prohlížečích. Můžete navrhnout vše od vlastní animace na HTML5 hry se správnými knihovnami.

Jednou z nejnovějších knihoven, které stojí za testování, je Rough.js. To je skript pro generování grafiky zdarma v současné době v beta verzi pracuje na plátně a SVG elementech.

Můžete vytvořit vlastní ikony, sloupcové grafy, téměř vše, co chcete v kódu. A konečný výsledek bere na nádherné ručně tažené pocit.

Od tohoto psaní je Rough.js stále ve verzi v0.1 beta nemusí být připravena pro webové stránky živé produkce. Ale je to důkaz webové standardy rychle postupují a vstupujeme do věku, kde je tento druh věcí možný.

Vezměme si to například ukazatel průběhu generovány prostřednictvím Rough.js. Pokud klepnete na tlačítko “Start” tlačítko si všimnete spustí vlastní animaci že vypadá opravdu ručně. Používá se SVG řádky s předdefinovanými vzory vytvořit efekt zvlnění, který vypadá opravdu přirozeně.

Na hlavní stránce GitHubu naleznete seznam sekcí mnoho příkladů Rough.js v akci.

Všechny tyto dodávány se vzorky kódu a měl by být docela snadno přepracovat pro všechny webové stránky. Vše, co potřebujete, je skriptový soubor Rough.js a trpělivost, abyste se nepořádali s JavaScriptem.

Tady je ukázkový úryvek demonstrovat, jak vytvořit obdélník v kódu:

 var drs = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); hrubý oblouk (10, 10, 200, 200); // x, y, šířka, výška 

Docela jednoduchý, jakmile pochopíte kód, ale pravděpodobně ne nejvíce intuitivní skript pro začátečníky.

Pokud chcete více kódu a ukázkové ukázky podívejte se na domovskou stránku Rough.js. Je to ideální místo pro začátek učení a nalezení kódu, který můžete přepracovat.

Pokud máte dotazy nebo návrhy týkající se dalších funkcí, můžete tvůrce služby Rough.js odeslat na Twitteru @preetster.