A Rough.js kézzel rajzolt grafikákat készít Canvas & SVG-vel

Elképesztő látni, hogy milyen messze van az internet dinamikus elemek mint például böngésző SVG-k. Mindent megtervezhet egyéni animációk nak nek HTML5 játékok a megfelelő könyvtárakkal.

Az egyik legértékesebb könyvtári könyvtár Rough.js. Ez egy ingyenes grafikus generációs szkript jelenleg béta-ban a vászon és az SVG elemeken működik.

Egyéni ikonok, sávdiagramok, elég sok mindent, amit mindegyik kódban szeretne. És a végeredmény egy gyönyörű, kézzel rajzolt érzést vesz.

Ebből az írásból Rough.js még mindig v0.1 béta, így előfordulhat, hogy nem áll készen élő élő webhelyre. De ez bizonyíték A webes szabványok gyorsan haladnak és belépünk egy olyan korba, ahol ez a fajta cucc lehetséges.

Vegyük például ezt fejlődésmutató Rough.js segítségével generált. Ha a gombra kattint “Rajt” gomb, azt észleli egyéni animációt futtat hogy tényleg kézzel rajzolt. Ez használja SVG-sorok előre meghatározott mintákkal olyan hamis hatás létrehozása, amely valóban természetes.

A GitHub főoldalán talál egy szakaszlistát Rough.js sok példája a cselekvésben.

Ebből mind jönnek kódmintákkal és kell lennie nagyon könnyen átdolgozható bármely weboldalon. Mindössze annyit kell tennie, hogy a Rough.js parancsfájlja van, és némi türelmet okoz a JavaScript-el.

Itt van egy minta töredéke bemutatja, hogyan kell hozzon létre egy téglalapot kódban:

 var rough = új RoughCanvas (document.getElementById ('myCanvas'), 400, 200); durva.szögű (10, 10, 200, 200); // x, y, szélesség, magasság 

Elég egyszerű, ha megérted a kódot, de valószínűleg nem a leginkább intuitív szkript kezdőknek.

Ha több kódrészletet és minta demót szeretne nézd meg a Rough.js honlapját. Ez a tökéletes hely a tanulás megkezdéséhez és a kódrészletek megtalálásához.

Ha további kérdése vagy javaslata van a további funkciókkal kapcsolatban, akkor a Twitter @preetster-ben üzenetet küldhet a Rough.js készítőjének.