Rough.js tekee käsin piirretyn grafiikan Canvas & SVG llä

On hämmästyttävää nähdä, kuinka pitkälle verkko on tullut dynaamisia elementtejä kuten selaimen SVG: t. Voit suunnitella kaiken mukautettuja animaatioita että HTML5-pelit oikeiden kirjastojen kanssa.

Yksi uusimmista testattavista kirjastoista on Rough.js. Se on a ilmainen graafisen sukupolven skripti tällä hetkellä beetassa toimii kankaalle ja SVG-elementeille.

Voit rakentaa mukautettuja kuvakkeita, pylväskaavioita, melko paljon mitä haluat kaikki koodissa. Ja lopputulos ottaa upean käsin vedetyn tunteen.

Tämän kirjoituksen jälkeen Rough.js on edelleen v0.1-beta, joten se ei ehkä ole valmis live-tuotanto-sivustolle. Mutta se on todiste siitä web-standardit etenevät nopeasti ja me astumme aikakauteen, jossa tällainen tavaraa on mahdollista.

Ota esimerkiksi tämä edistymispalkki luotu Rough.js: n kautta. Jos valitset “alkaa” -painiketta huomaat sen suorittaa mukautetun animaation että todella näyttää käsin piirrettynä. Se käyttää SVG-linjat, joissa on ennalta määritellyt kuviot luoda huono vaikutus, joka näyttää todella luonnolliselta.

GitHubin pääsivulla on osaluettelo monia esimerkkejä Rough.js-toiminnasta.

Kaikki näistä tulevat koodinäytteiden mukana ja sen pitäisi olla melko helppo muokata mihin tahansa verkkosivustoon. Tarvitset vain Rough.js-skriptitiedoston ja hieman kärsivällisyyttä JavaScriptin kanssa.

Tässä on a näytteenpätkä osoittaa luoda suorakulmion koodilla:

 var rough = uusi RoughCanvas (document.getElementById ('myCanvas'), 400, 200); karkea suorakulmio (10, 10, 200, 200); // x, y, leveys, korkeus 

Aika yksinkertainen, kun ymmärrät koodin, mutta luultavasti eniten intuitiivinen skripti aloittelijoille.

Jos haluat lisää koodinpätkiä ja näytteitä tutustu Rough.js-kotisivulle. Se on täydellinen paikka oppia ja löytää koodinpätkiä, joita voit muokata.

Jos sinulla on myös kysymyksiä tai ehdotuksia lisäominaisuuksista, voit viestiä Rough.js-luojasta Twitterissä @preetster.