Rough.js прави нарисувана графика с Canvas & SVG

Удивително е да видим с какво е дошла мрежата динамични елементи като SVG на браузъра. Можете да проектирате всичко от персонализирани анимации да се HTML5 игри с правилните библиотеки.

Една от най-новите библиотеки, които си струва да бъдат тествани, е Rough.js. Това е скрипт за генериране на безплатни графики в момента е в бета версия работи на платна и SVG елементи.

Можете да създавате персонализирани икони, бар графики, почти всичко, което искате в кода. И крайният резултат поема великолепно ръчно извлечено чувство.

Към момента на писане, Rough.js е все още в v0.1 бета, така че може да не е готов за уебсайт с продукция на живо. Но това е доказателство за това уеб стандартите напредват бързо и навлизаме в епоха, в която е възможно подобно нещо.

Вземете например това лента за напредък генерирани чрез Rough.js. Ако кликнете върху “начало” ще го забележите изпълнява персонализирана анимация че наистина изглежда ръчно рисувана. Той използва SVG линии с предварително зададени модели да се създаде колеблив ефект, който изглежда наистина естествено.

На главната страница на GitHub ще намерите списък с раздели много примери на Rough.js в действие.

Всички тези идват с образци код и трябва да бъде доста лесно да се преработи за всеки уебсайт. Всичко, от което се нуждаете е скрипт Rough.js и малко търпение, за да се забъркате с JavaScript.

Ето едно примерен фрагмент демонстрирайки как създайте правоъгълник в кода:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); груб правоъгълник (10, 10, 200, 200); // x, y, ширина, височина 

Доста просто, след като разберете кода, но вероятно не най-интуитивния скрипт за начинаещи.

Ако искате още кодови фрагменти и примерни демонстрации разгледайте началната страница на Rough.js. Това е идеалното място да започнете да учите и да намерите кодови фрагменти, които можете да преработите.

Също така, ако имате въпроси или предложения за допълнителни функции, можете да изпратите съобщение на създателя на Rough.js в Twitter @preetster.