Rough.js teeb käsitsi joonistatud graafika Canvas & SVG-ga

On hämmastav näha, kui kaugele on veebi jõudnud dünaamilised elemendid nagu näiteks brauseris asuvad SVG-d. Saate kujundada kõike alates kohandatud animatsioone kuni HTML5 mängud õigete raamatukogudega.

Üks uuemaid raamatukogusid, mida tasub testida, on Rough.js. See on vaba graafika genereerimise skript praegu beetaversioonis töötab lõuendil ja SVG elementidel.

Saate ehitada kohandatud ikoone, ribadiagramme, päris palju midagi, mida soovid kõik koodis. Ja lõpptulemus võtab endale suurepärase käsitsi tõmmatud tunde.

Selle kirjutamise järel on Rough.js ikka veel v0.1 beeta, nii et see on ei pruugi olla valmis elava tootmise veebisaidile. Aga see on tõestuseks veebistandardid arenevad kiiresti ja me siseneme sellesse vanusesse, kus selline asi on võimalik.

Võtke seda näiteks edenemisriba loodud Rough.js-i kaudu. Kui klõpsate “Alusta” nupp, mida märkate käivitab kohandatud animatsiooni seda Tundub tõesti käsitsi joonistatud. See kasutab SVG read eelnevalt määratletud mustritega luua ebakindel mõju, mis näib tõeliselt loomulik.

GitHubi põhilehel leiate jaotise nimekirja palju näiteid Rough.js'ist.

Kõik need tulevad koodiproovidega ja peaks olema mis tahes veebisaidi jaoks üsna lihtne. Kõik, mida vajame, on Rough.js-i skriptifail ja mõned kannatused JavaScripti segamiseks.

Siin on a proovi fragment näidates, kuidas seda teha luua koodiga ristkülik:

 var rough = uus RoughCanvas (document.getElementById ('myCanvas'), 400, 200); karedad ristkülikud (10, 10, 200, 200); // x, y, laius, kõrgus 

Päris lihtne pärast koodi mõistmist, kuid tõenäoliselt mitte algajatele kõige intuitiivsemat skripti.

Kui soovite rohkem koodilõikeid ja näidisproove vaadake Rough.js'i kodulehte. See on ideaalne koht õppimise alustamiseks ja koodide väljavõtete leidmiseks, mida saate ümber töötada.

Samuti, kui teil on küsimusi või ettepanekuid täiendavate funktsioonide kohta, saate sõnumi Rough.js loojale Twitteris @preetster.