- Киса! Я давно хотел вас спросить как художник художника: вы рисовать умеете?
О. Бендер
Если рисовать вы не умеете, то это не беда. Вы можете лучше - сделать инструмент для рисования, который запускается в браузере и позволяет легко сохранить нарисованное в файл.
Итак, поехали! Создаем index.html файл со следующей разметкой:
Главные элементы в HTML-разметке - это собственно canvas (область в которой происходит рисование) и кнопки пользовательского интерфейса:
- стереть все
- выбрать размер кисти
- выбрать цвет кисти
- экспортировать рисунок в PNG
Далее создаем скрипт, в котором конструируем объект класса FreehandDrawing (описан ниже), передавая ему в качестве аргумента canvas, и привязываем обработчики к событиям интерфейса (нажатия кнопок).
Отдельный класс позволяет легко использовать несколько областей рисования одновременно. Для этого достаточно добавить canvas в HTML-разметку и создать для нее новый объект FreehandDrawing.
Класс для рисования может быть описан либо как отдельный JS-файл (потребуется его подключение в HTML-разметке), либо добавлен в drawing.js.
Обратите внимание на вызов requestAnimationFrame в методе redraw. Данный вызов указывает браузеру на необходимость сделать перерисовку, а непосредственно перед ней вызвать переданную в аргументе функцию. Этот способ наиболее оптимальный в плане производительности, потому что позволяет планировать и объединять несколько последовательных перерисовок в одну.
Вот все и готово! Открываем index.html в браузере и можно приступать к творчеству.
Репозиторий готового проекта доступен на GitHub.