Как сделать область рисования на javascript.
Всем привет! В этой статье мы рассмотрим, как сделать область для рисования на сайте на javascript.
Описание
Для нашей цели мы будем использовать библиотеку под названием Sketchpad.
Чтобы посмотреть, как это работает, вы можете перейти на официальный сайт и попробовать нарисовать что-нибудь в первом блоке. Чуть ниже вы найдете кнопки undo(назад), redo(вперед), кнопку для выбора цвета и ползунок для изменения размера карандаша. После того, как вы что-нибудь нарисуете, вы можете нажать кнопку animate, которая повторит все ваши действия, т.е. анимирует их.
Установка и настройка
Чтобы установить библиотеку, вы можете либо скачать файлы, либо использовать Bower:
bower install sketchpad
После того, как все скачаете и подключите, напишите следующий блок на странице:
<canvas class="sketchpad" id="sketchpad"><canvas>
Теперь инициализируйте библиотеку:
var sketchpad = new Sketchpad({
element: '#sketchpad',
width: 400,
height: 400
});
API
На официальном сайте вы можете найти все нужные вам функции, такие, как вперед, назад, изменение цвета, изменение размера, анимирование, конвертация в json или object settings, копирование рисунка.
Если вы хотите узнать больше про canvas и научиться самому писать все на чистом javascript, обратите внимание на видеокурс HTML5 и CSS3 с Нуля до Гуру.
А у меня на этом все. Спасибо за внимание!
-
Создано 08.04.2016 22:42:03
-
Михаил Русаков
Комментарии (2):
Куда форум подевался?
Ответить
он теперя в основном меню
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.