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); // х, у, ширина, высота 

Довольно просто, когда вы понимаете код, но, вероятно, не самый интуитивно понятный скрипт для начинающих.

Если вы хотите больше фрагментов кода и демонстрационных примеров проверить домашнюю страницу Rough.js. Это идеальное место для начала обучения и поиска фрагментов кода, которые можно переделать..

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