Книга: Выразительный JavaScript

Реализация

Реализация

Интерфейс программы выводит вверху большой элемент <canvas>, под которым есть несколько полей ввода. Пользователь рисует на картинке, выбирая инструмент из поля <select>, а затем нажимая на холсте мышь. Есть инструменты для рисования линий, стирания кусочков картинки, добавления текста и т. п.

Щелчок на холсте передаёт событие "mousedown" текущему инструменту, который обрабатывает его, как считает нужным. Рисование линий, например, будет слушать события "mousemove", пока кнопка мыши не будет отпущена, и нарисует линию по пути мыши текущим цветом и размером кисти.

Цвет и размер кисти выбираются в дополнительных полях ввода. Они выполняют обновление свойств контекста рисования на холсте fillStyle, strokeStyle, и lineWidth каждый раз при их изменении.

Загрузить картинку в программу можно двумя способами. Первый использует поле file, где пользователь выбирает файл со своего диска. Вторая запрашивает URL и скачивает картинку из интернета.

Картинки хранятся нестандартным способом. Ссылка save с правой стороны ведёт на текущую картинку. По ней можно проходить, делиться ей или сохранять файл через неё. Я скоро объясню, как это работает.

Оглавление книги