Файл: Webпрограммирование Практическое занятие 4.pdf

Web-
программирование
Практическое занятие 4
Работа посвящена созданию простейшего графического редактора с минимальным функционалом.
1.
Сегодня мы создадим простой графический редактор, с помощью которого можно изобразить вот такие простые картинки. Посмотрите внимательно на скриншот.
Какие элементы страницы вы видите? (6 цветных кругов и большой квадрат по центру). В HTML документе нам потребуется вставить эти элементы, а управлять ими мы будем с помощью JS и
CSS.
2.
Нам понадобится вот такая заготовка страницы.
Обратите внимание на следующие блоки:
 meta charset нам нужен, чтобы при выводе русских символов не получать абракадабру.

Стили подключаются в head разделе, как обычно


Тело состоит из двух больших блоков – блока палитры с шестью кругами и блока полотна, на котором можно будет рисовать.

Палитру мы выполним с помощью маркированного списка. Всем элементам li этого списка мы зададим одинаковый класс, чтобы устанавливать размер и расположение, и разные идентификаторы, чтобы изменить цвет и отслеживать нажатие на каждый отдельно.

Полотно у нас будет реализовано с помощью нового элемента – canvas. На канвасе можно рисовать графические примитивы, и он впервые внедрён в HTML 5. Очень важно задать размеры именно здесь, а не в CSS, так как CSS фактически растянет изначальный канвас, изменяя элементы, а такое задание установит нужный размер сразу.

В конце тела не забудьте подключить скрипт, пусть и пока пустой.
3.
Можете запустить страницу и посмотреть, что на ней происходит. Канвас вы скорее всего не увидите вовсе – у него нет границ и цвета. Маркированный список будет отображаться стандартно
-
6 пунктов в строчку, маленькие чёрные точки. Мы же хотим добиться примерно того же, что вы видите на скриншоте.
4.
Начнём со списка.
5.
С помощью селектора по идентификатору мы раскрашиваем круги в нужные цвета. Приведена команда для голубого цвета, самостоятельно раскрасьте остальные. Канвас тоже нужно поместить на центр страницы, но для этого нам нужно будет сначала сделать отступ от левого края страницы в половину ширины экрана, а потом сдвинуть левее на половину ширины канваса (-250 пикселей).
Зададим цвет, стиль и толщину границы, чтобы видеть расположение канваса.

6.
Начинаем писать код JavaScript. Массивы – это группа переменных, объединённых одним именем и различающихся по индексу (порядковому номеру), который начинается с 0. Повторите код в первом блоке и попробуйте запустить страницу. Пронаблюдайте три алерта.
Но нам совершенно не обязательно задавать начальные значения сразу в момент объявления массива. Мы можем это сделать и потом, поэлементно, обращаясь к ним через индекс в квадратных скобках.
Так как у нас есть шесть кругов одинаковых по смыслу и отличающихся только одним параметром (цвет), то нам проще создать массив на 6 элементов, записать туда объекты-круги, и управлять ими через этот массив переменных. Как видите, объекты мы достаём со страницы с помощью команды document.getElementById. Повторите этот код.

7.
Ради чего же мы всё-таки решили использовать массив, а не 6 разных переменных? Потому что так их проще перебирать. Нам нужно перечислить все индексы, чтобы достать все переменные.
Для этого нам пригодится цикл for.
Повторите этот код и запустите страницу. Пронаблюдайте за всплывающими окнами и цифрами в них. После этот код можно удалить или закомментировать с помощью /* и */
8.
Как вы помните из прошлого занятия, мы можем присоединять к элементам на странице обработчики событий с помощью команды addEventListener. Нам нужно реализовать выбор цвета для кисти при щелчке на круг из палитры. В целом, это практически одинаковые функции, в которых различается только цвет, который мы хотим установить. Поэтому делать шесть одинаковых функций кажется не очень хорошей идеей. И всё было бы хорошо, если бы мы могли легко воспользоваться аргументами функции, но addEventListener не любит, когда вы пишите что- то кроме имени функции. Поэтому мы поступим хитрее.
Дело в том, что если вы задали событие для какого-то элемента, то это событие действует и для всех дочерних элементов (то ест внутренних). Поэтому мы можем настроить событие только для тега ul, а различать, на какой li нажали мы будем с помощью идентификаторов.
Для начала создайте переменную, которой присвойте объект-список. Потом добавьте к нему обработчик события по клику мыши. В самой функции напишите пока команду вывода в консоль тэга элемента, на который нажали. «e» здесь означает параметр события – event. Через него мы можем получать доступ к любому параметру события, в данном случае – тег. Когда запустите страницу, нажмите F12 и понажимайте на круг и на пространство между ними. В пространстве будет UL, а круги будут выдавать сообщение LI.
9.
Сделаем так, чтобы кружки немного увеличивались, когда мы на них кликнули. Таким образом пользователь поймёт, какой цвет он выбрал. Первая важная проверка – на какой тег мы нажали.
Если это не LI, то ничего делать не надо – это не цветные круги. Если это всё же LI, мы в цикле сначала вернём все круги к исходному размеру, а потом, после цикла, увеличим тот, на который нажали. Повторите код.

10.
Если всё сделано верно – круги начнут менять размер по щелчку.
11.
Изменить размер кружка – не значит запомнить цвет. Создадим глобальную переменную, в которую запишем красный цвет, а также увеличим красный круг перед выполнением остальной программы. Таким образом красный цвет у нас будет выбран сразу при запуске страницы.
Чтоб запомнить цвет, нам нужно в функции-обработчике щелчка мыши провести проверку, круг с каким идентификатором был нажат. В зависимости от этого, мы изменим переменную targetColor на нужный нам цвет (строку с кодом цвета). Перед вами проверка на красный цвет. Добавьте проверку для всех остальных цветов.

12.
Вот так выглядит готовый код.
13.
Теперь научимся рисовать на канвасе. В целом, нам доступны обычные примитивы, такие как круги, линии, прямоугольники, но для начала будем рисовать круг, как будто толстой кистью.
Чтобы всё заработало, нам нужна переменная, в которую мы запишем объект-канвас. После этого создадим ещё одну переменную canvasContext и приравняем ей результат работы функции getContext с параметром 2d. Это даст программе понять, что мы будем рисовать 2д графику (да, тут можно и 3д). Так как рисовать мы должны по движению мыши, добавим обработчик события по mousemove.
В обработчике мы проверим, нажата ли левая кнопка мыши, сравним e.which с единицей. И если это так, зададим цвет для круга на targetColor. Выполним команду beginPath, что даст программе понять, что наш графический примитив будет не связан с остальными, а будет сам по себе. После этого нарисуем круг с помощью команды arc. С её помощью можно рисовать и арки, то есть части круга, но нам сейчас это не надо.
Синтаксис простой:
canvasContext.arc( координата Х, координата У, радиус, радианы начала, радианы конца);
В круге ровно 2*пи радиан. поэтому, чтобы нарисовать полный круг, нам нужно начать с 0 и закончить на 2пи.
Координаты, куда мы щёлкнули мышкой, мы будем отслеживать с помощью команд e.offsetX и e.offsetY
. Оффсет даёт нам возможность узнать координаты, как если бы левый верхний угол нашего блока имел координаты 0,0.
Но этими командами мы только описали, что мы хотим нарисовать. Чтобы это появилось на канвасе, нужно выполнить команду .fill(), которая нарисует объект с заливкой. Для интереса можете вместо fill выполнить stroke(), а можете и обе сразу.