Rough.js робить мальовану графіку з Canvas & SVG

Дивно бачити, як далеко йде мережа динамічні елементи як от SVG в браузері. Ви можете спроектувати все з спеціальні анімації до Ігри HTML5 з потрібними бібліотеками.

Однією з новітніх бібліотек, які варто перевірити, є Rough.js. Це безкоштовний сценарій генерації графіки поточно в бета-версії працює на елементах canvas і SVG.

Ви можете створювати власні іконки, гістограми, майже все, що ви хочете все в коді. І, кінцевий результат бере на себе чудове мальоване відчуття.

На момент написання статті Rough.js все ще знаходиться у версії 1.0 бета-версії може бути не готовий до веб-сайту, що виробляється в прямому ефірі. Але це є доказом цього веб-стандарти швидко розвиваються і ми вступаємо у вік, коли це можливо.

Візьмемо, наприклад, це індикатор виконання генерується через Rough.js. Якщо натиснути кнопку “Початок” Ви його помітите запускає спеціальну анімацію що дійсно виглядає мальованим. Він використовує Лінії SVG з попередньо визначеними шаблонами створити хиткий ефект, який виглядає цілком природним.

На головній сторінці GitHub ви знайдете перелік розділів багато прикладів Rough.js в дії.

Все це приходять з зразками коду і має бути досить легко переробити для будь-якого веб-сайту. Все, що вам потрібно, це файл скрипта Rough.js і деяке терпіння, щоб зіткнутися з JavaScript.

Ось a фрагмент зразка демонструючи, як створити прямокутник у коді:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, ширина, висота 

Досить просто, як тільки ви зрозумієте код, але, мабуть, не самий інтуїтивний скрипт для початківців.

Якщо потрібно більше фрагментів коду та зразкових демонстрацій Перегляньте домашню сторінку Rough.js. Це ідеальне місце для початку навчання та пошуку фрагментів коду, які можна переробити.

Крім того, якщо у вас є питання або пропозиції щодо додаткових можливостей, ви можете повідомити творцю Rough.js на Twitter @preetster.