Rough.js tworzy ręcznie rysowaną grafikę z Canvas i SVG

To niesamowite, jak daleko zaszła sieć elementy dynamiczne Jak na przykład SVG w przeglądarce. Możesz zaprojektować wszystko z niestandardowe animacje do Gry HTML5 z odpowiednimi bibliotekami.

Jedną z najnowszych bibliotek wartych przetestowania jest Rough.js. To jest darmowy skrypt do generowania grafiki obecnie w wersji beta działa na elementach canvas i SVG.

Możesz tworzyć własne ikony, wykresy słupkowe, prawie wszystko, co chcesz w kodzie. I ostateczny wynik nabiera wspaniałego uczucia odręcznego rysowania.

W chwili pisania tego artykułu Rough.js nadal działa w wersji v0.1 beta może nie być gotowy na stronę produkcji na żywo. Ale to dowód na to standardy internetowe rozwijają się szybko i wkraczamy w wiek, w którym ten rodzaj rzeczy jest możliwy.

Weźmy na przykład to pasek postępu wygenerowane przez Rough.js. Jeśli klikniesz “Początek” przycisk zauważysz uruchamia niestandardową animację że naprawdę wygląda odręcznie. Używa Linie SVG ze wstępnie zdefiniowanymi wzorami stworzyć chwiejny efekt, który wygląda naprawdę naturalnie.

Na głównej stronie GitHub znajdziesz listę sekcji wiele przykładów Rough.js w akcji.

Wszystkie te pochodzą z próbek kodu i powinno być dość łatwo przerobić dowolną stronę internetową. Wszystko, czego potrzebujesz, to plik skryptu Rough.js i trochę cierpliwości, aby zepsuć JavaScript.

Tutaj jest przykładowy urywek pokazując, jak to zrobić utwórz prostokąt w kodzie:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); szorstki.prostokątny (10, 10, 200, 200); // x, y, szerokość, wysokość 

Całkiem proste, gdy zrozumiesz kod, ale prawdopodobnie nie jest to najbardziej intuicyjny skrypt dla początkujących.

Jeśli chcesz więcej fragmentów kodu i przykładowych wersji demonstracyjnych sprawdź stronę główną Rough.js. Jest to idealne miejsce, aby rozpocząć naukę i znaleźć fragmenty kodu, które można przerobić.

Ponadto, jeśli masz pytania lub sugestie dotyczące dodatkowych funkcji, możesz wysłać wiadomość do twórcy Rough.js na Twitterze @preetster.