Το Rough.js κάνει χέρι-τραβηγμένα γραφικά με καμβά και SVG

Είναι εκπληκτικό να δούμε πόσο μακριά έχει έρθει ο ιστός δυναμικά στοιχεία όπως SVG σε πρόγραμμα περιήγησης. Μπορείτε να σχεδιάσετε τα πάντα από προσαρμοσμένες κινούμενες εικόνες προς το Παιχνίδια HTML5 με τις σωστές βιβλιοθήκες.

Μία από τις νεότερες βιβλιοθήκες που αξίζει τον έλεγχο είναι Rough.js. Είναι ένα ελεύθερη δέσμη ενεργειών δημιουργίας γραφικών αυτήν την περίοδο σε beta έργα σε καμβά και στοιχεία SVG.

Μπορείτε να δημιουργήσετε προσαρμοσμένα εικονίδια, γραφήματα γραμμών, σχεδόν ό, τι θέλετε όλοι στον κώδικα. Και, το τελικό αποτέλεσμα παίρνει ένα πανέμορφο συναρπαστικό χέρι.

Από αυτό το γράψιμο, το Rough.js είναι ακόμα στο v0.1 beta, έτσι μπορεί να μην είναι έτοιμος για μια ζωντανή ιστοσελίδα παραγωγής. Αλλά είναι μια απόδειξη ότι τα πρότυπα ιστού προχωρούν γρήγορα και εισερχόμαστε σε μια εποχή όπου τέτοια είδη είναι δυνατά.

Πάρτε για παράδειγμα αυτό γραμμή προόδου δημιουργείται μέσω του Rough.js. Εάν κάνετε κλικ στο “Αρχή” θα το παρατηρήσετε εκτελεί μια προσαρμοσμένη κινούμενη εικόνα ότι πραγματικά φαίνεται χέρι. Χρησιμοποιεί Γραμμές SVG με προκαθορισμένα πρότυπα για να δημιουργήσετε ένα ασταθές αποτέλεσμα που μοιάζει φυσικό.

Στην κύρια σελίδα του GitHub, θα βρείτε μια καταχώριση ενότητας πολλά παραδείγματα του Rough.js σε δράση.

Ολα αυτά έρχονται με δείγματα κώδικα και πρέπει να είναι αρκετά εύκολο να ξαναδοκιμάσετε για οποιαδήποτε ιστοσελίδα. Το μόνο που χρειάζεστε είναι το αρχείο δέσμης ενεργειών Rough.js και κάποια υπομονή για να χάσετε το JavaScript.

Εδώ είναι α δείγμα δείγματος αποδεικνύοντας πώς να δημιουργήστε ένα ορθογώνιο στον κώδικα:

 var rough = νέο RoughCanvas (document.getElementById ('myCanvas'), 400, 200). τραχύ ορθογώνιο (10, 10, 200, 200). // x, y, πλάτος, ύψος 

Αρκετά απλή μόλις καταλάβετε τον κώδικα αλλά πιθανώς δεν είναι το πιο διαισθητικό σενάριο για αρχάριους.

Αν θέλετε περισσότερα αποσπάσματα κώδικα και δείγματα demos ανατρέξτε στην αρχική σελίδα του Rough.js. Είναι το τέλειο μέρος για να ξεκινήσετε τη μάθηση και να βρείτε τμήματα κώδικα που μπορείτε να επεξεργαστείτε ξανά.

Επίσης, εάν έχετε ερωτήσεις ή υποδείξεις για πρόσθετες λειτουργίες, μπορείτε να στείλετε μήνυμα στον δημιουργό Rough.js στο Twitter @preetster.