Создаем доску для рисования для сайта на JS RUDEBOX_miniВ данном уроке мы рассмотрим процесс создание весьма простой вещи, а именно способ рисование на сайте, но это мы сделаем не совсем обычным образом, мы стилизуем все это под школьную доску и добавим эффекты мела при прорисовке текста, это позволит получить полное ощущение школьной доски. Такая вещь будет полезной для сайта, где администратор хочет чтобы пользователь принял участие в дизайне и внес свои штрихи разнообразными рисунками. Для разработки нам понадобится несколько правил стилей, а всю часть работы будет выполнять JS.

 

Кроме этого доску легко редактировать, следует отметить, что это только концепт, и дополнительные функции необходимо еще доделывать, но все равно, данный пример имеет место быть. Давайте приступим.

Шаг 1. HTML

Разметка будет простая, нам необходимо указать размеры полотна, и выполнить вызов самой доски и ее элементов:

Как вы заметили ничего сложного нет. Со стилями все еще проще, у нас будет пару параметров контейнера, кроме этого мы используем два фона, заливка и рамка, для этого мы будем использовать сжатые рисунки с растровой графикой. Теперь перейдем к следующему шагу.

Создаем доску для рисования для сайта на JS RUDEBOX1

Шаг 2. JS

Нам необходимо определить параметры полотна, кроме этого добавляем функции, при помощи которого курсор при нажатии будет чертить по указанной плоскости, также добавляем стилизацию кисти и некоторые декорации на доске, такие как надписи:

Все достаточно просто, при этом мы получаем достойный пример который можно прикрутить к своему сайту.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: