Rough.js vytvára ručne kreslenú grafiku s plátnom a SVG

Je úžasné vidieť, do akej miery sa web prišiel dynamické prvky ako napr SVG v prehliadači. Môžete navrhnúť všetko od vlastné animácie na Hry HTML5 s pravými knižnicami.

Jedna z najnovších knižníc, ktoré stojí za testovanie, je Rough.js. Je to skript generovania grafiky zdarma v súčasnosti v beta verzii pracuje na plátne a SVG prvkoch.

Môžete si vytvoriť vlastné ikony, stĺpcové grafy, skoro všetko, čo chcete všetko v kóde. A konečný výsledok naberá nádherný ručne vyvedený pocit.

Od tohto písania je Rough.js stále v beta verzii v0.1, tak to je nemusia byť pripravené na živé webové stránky výroby. Ale je to dôkaz toho webové štandardy postupujú rýchlo a vstupujeme do obdobia, v ktorom je možné takéto veci.

Vezmite si napríklad toto ukazateľ postupu generované cez Rough.js. Ak kliknete na tlačidlo “štart” tlačidlo si to všimnete beží vlastná animácia že naozaj vyzerá ručne. Používa to SVG s preddefinovanými vzormi vytvoriť efekt, ktorý vyzerá naozaj prirodzene.

Na hlavnej stránke GitHub nájdete zoznam sekcií veľa príkladov Rough.js v akcii.

Všetky tieto príďte so vzorkami kódu a malo by byť docela ľahko prepracovať pre akékoľvek webové stránky. Všetko, čo potrebujete, je súbor skriptov Rough.js a nejaká trpezlivosť, aby ste zabili JavaScript.

Tu je a útržok vzorky demonštrovať, ako vytvoriť obdĺžnik v kóde:

 var rough = nový RoughCanvas (document.getElementById ('myCanvas'), 400, 200); hrubý pravý (10, 10, 200, 200); // x, y, šírka, výška 

Docela jednoduché, akonáhle pochopíte kód, ale pravdepodobne nie je najintuatívnejší skript pre začiatočníkov.

Ak chcete mať viac úryvkov kódu a vzorových ukážok pozrite sa na domovskú stránku Rough.js. Je to ideálne miesto na začatie učenia a nájdenie úryvkov kódu, ktoré môžete prepracovať.

Ak máte otázky alebo návrhy ďalších funkcií, môžete na Twitter @preetster poslať správu o autorovi programu Rough.js.