Rough.js realizează grafică manuală cu canvas și SVG

Este uimitor să vedem cât de departe a venit webul elemente dinamice precum în SVG-uri în browser. Puteți proiecta totul de la animații personalizate la Jocuri HTML5 cu bibliotecile corecte.

Una dintre cele mai noi biblioteci în valoare de testare este Rough.js. E o grafice gratuite de generare grafică în prezent în versiune beta lucrează pe pânză și elemente SVG.

Puteți crea pictograme personalizate, grafice de bare, ceva ce doriți totul în cod. Și rezultatul final are un sentiment remarcabil.

Din această scriere, Rough.js este încă în v0.1 beta, așa că poate să nu fie pregătit pentru un site web de producție live. Dar este dovada asta standardele web progresează rapid și intrăm într-o epocă în care lucrurile astea sunt posibile.

Luați, de exemplu, acest lucru bara de progres generate prin Rough.js. Dacă faceți clic pe “start” butonul îl veți observa rulează o animație personalizată acea într-adevăr arată manual. Folosește Liniile SVG cu modele predefinite pentru a crea un efect înnebunit care arată cu adevărat natural.

Pe pagina principală GitHub, veți găsi o listă de secțiuni multe exemple de Rough.js în acțiune.

Toate acestea vin cu mostre de cod și ar trebui să fie destul de ușor de reproiectat pentru orice site web. Tot ce aveți nevoie este fișierul script Rough.js și o anumită răbdare să vă confruntați cu JavaScript.

Iată a fragment de încercare demonstrând cum să creați un dreptunghi în cod:

 var brut = nou RoughCanvas (document.getElementById ('myCanvas'), 400, 200); unghi drept (10, 10, 200, 200); // x, y, lățime, înălțime 

Destul de simplu, odată ce ați înțeles codul, dar probabil nu cel mai intuitiv scenariu pentru începători.

Dacă doriți mai multe fragmente de cod și demonstrații de eșantioane verificați pagina de pornire Rough.js. Este locul perfect pentru a începe să învățați și pentru a găsi fragmente de cod pe care le puteți lucra din nou.

De asemenea, dacă aveți întrebări sau sugestii pentru funcții suplimentare, puteți trimite mesajul creatorului Rough.js pe Twitter @preetster.