„Rough.js“ daro rankomis piešiamą grafiką su „Canvas & SVG“

Nuostabus pamatyti, kiek internetas atėjo dinaminiai elementai toks kaip naršyklės SVG. Galite sukurti viską iš pritaikytos animacijos į HTML5 žaidimai su teisingomis bibliotekomis.

Vienas iš naujausių bibliotekų, kurias verta patikrinti Rough.js. Tai yra nemokamai grafikos generavimo scenarijus šiuo metu beta versijoje veikia ant drobės ir SVG elementų.

Galite sukurti pasirinktines piktogramas, juostų diagramas, beveik viską, ką norite, kad visi būtų koduoti. Ir galutinis rezultatas patenka į nuostabų rankų piešinį.

Nuo šio rašymo Rough.js vis dar yra v0.1 beta versijoje, taigi taip gali būti pasirengusi gyvai produkcijos svetainei. Bet tai įrodymas interneto standartai sparčiai vyksta ir mes įžengiame į amžių, kai toks dalykas yra įmanoma.

Paimkite, pavyzdžiui, tai progreso juosta sukurta per Rough.js. Jei spustelėsite “Pradėti” Jūs pastebėsite mygtuką atlieka pasirinktinį animaciją kad iš tikrųjų atrodo ranka. Jis naudoja SVG linijos su iš anksto nustatytais modeliais sukurti neįtikėtiną efektą, kuris atrodo tikrai natūralus.

Pagrindiniame „GitHub“ puslapyje rasite skyrių sąrašą daug Rough.js pavyzdžių.

Visa tai ateiti su kodo pavyzdžiais ir turėtų būti gana lengva perdirbti bet kurioje svetainėje. Viskas ko jums reikia, yra „Rough.js“ scenarijų failas ir šiek tiek kantrybės, kad galėtumėte jaustis su „JavaScript“.

Štai a mėginio fragmentas įrodyti, kaip sukurti kodą stačiakampiu:

 var rough = naujas RoughCanvas (document.getElementById ('myCanvas'), 400, 200); šiurkštus stačiakampis (10, 10, 200, 200); // x, y, plotis, aukštis 

Gana paprasta, kai suprantate kodą, bet tikriausiai ne pats intuityviausias scenarijus pradedantiesiems.

Jei norite daugiau kodo fragmentų ir pavyzdžių demonstracijų patikrinkite Rough.js pagrindinį puslapį. Tai puiki vieta pradėti mokytis ir surasti kodų fragmentus, kuriuos galite perrašyti.

Be to, jei turite klausimų ar pasiūlymų dėl papildomų funkcijų, galite pranešti „Rough.js“ kūrėjui „Twitter“ @preetster.