плагин для графики от руки

Rough.js — плагин JS для рисования графики с эффектом «от руки»

Rough.js – это легковесная JavaScript библиотека, которая использует элемент HTML5 Canvas, чтобы создать графику будто нарисованную от руки.

Библиотека определяет функции для рисования линий, кривых, дуг, многоугольников, окружностей и эллипсов. Он также поддерживает рисование контуров SVG.

пример графики от плагина

Как использовать Rough.js

Подключаем саму библиотеку

Инициализируем объект RoughCanvas путем передачи параметров элементу Canvas, а также размер самого блока. Следующий фрагмент кода рисует прямоугольник.

рисованный треукольник

Чертим линию и эллипсы

линия и эллипсы

Заливаем цветом

фигуры с заливкой

Контуры SVG

контуры svg

На сайте автора библиотеки можно найти еще несколько полезных примеров с полным разбором их создания. Этот плагин JavaScript станет для Вас отличной находкой, если Вы хорошо разбираетесь в JS, Cnavas и увлекаетесь программным рисованием.

Скачать исходники либы можно по ссылке выше. Удачи!

437 просмотров
В поисках шаблона для сайта?