Уроки веб-разработки: создаем приложение для рисования текстом с помощью HTML, CSS и JavaScript

Урок подойдет для всех юных веб-разработчиков // учеников курса Создание и дизайн сайтов от Code it!.

Добро пожаловать в наше пошаговое руководство по созданию текстового приложения для рисования с использованием HTML, CSS и JavaScript! В этом уроке мы проведем вас через процесс создания интерактивного приложения для рисования с нуля. Независимо от того, являетесь ли вы новичком или веб-разработчиком среднего уровня, это руководство предоставит вам необходимые знания и навыки для создания собственного текстового приложения для рисования и раскрытия вашего творчества в Интернете.

Текстовое приложение поможет создавать уникальные и визуально привлекательные проекты. А еще это отличная тренировка, чтобы отточить свои навыки работы с HTML, CSS и JavaScript. Вы узнаете, как обрабатывать пользовательский ввод, реализовывать интерактивность и управлять элементами на веб-странице.

Чтобы следовать указаниям этого руководства, нужно иметь базовые знания HTML, CSS и JavaScript — полезным будет знакомство с такими понятиями, как элементы HTML, стили CSS и обработка событий JavaScript. Кроме того, вам понадобится редактор кода — например, Visual Studio Code или Sublime Text, для написания и сохранения кода.

Теперь давайте начнем шаг за шагом создавать текстовое приложение для рисования с использованием HTML, CSS и JavaScript.

Шаг 1 (HTML-код)

Для начала вам нужно создать базовый HTML-файл. В этот файл мы включим основную структуру нашего приложения для рисования.

После создания файлов просто вставьте следующие коды в свой файл. Обязательно сохраните HTML-документ с расширением .html, чтобы его можно было правильно просматривать в веб-браузере. Пройдемся по каждой части:

• строка 1 — это объявление информирует веб-браузер о том, что документ является файлом HTML;
• строка 2 — тег html является корневым элементом HTML-страницы. Атрибут lang указывает язык документа, в данном случае английский (русский - «ru»);
• строка 3 — элемент head содержит метаданные и другую информацию о веб-странице, которая не отображается непосредственно на самой странице;
• строка 4 — элемент title задает заголовок веб-страницы, который отображается в строке заголовка или на вкладке браузера;
• строка 5 — тег meta указывает кодировку символов для HTML-документа, гарантируя правильное отображение специальных символов и знаков;
• строка 6 — следующий тег meta задает конфигурацию области просмотра для мобильных устройств, обеспечивая соответствие ширины страницы ширине экрана устройства;
• строка 7 — тег link используется для включения внешнего файла CSS с именем «style.css», который содержит правила стилей для веб-страницы;
• строка 9 — элемент body содержит видимое содержимое веб-страницы;
• строка 11 — элемент canvas создает прямоугольную область на странице, которую можно использовать для рисования графики с помощью JavaScript;
• строка 12: элемент span — это встроенный контейнер, используемый для группировки текста или других встроенных элементов. В этом случае он отображает на странице текст «Нажмите ЛКМ и двигайте, чтобы что-то нарисовать!»;
• строка 18 — тег script используется для включения внешнего файла JavaScript с именем «script.js», который содержит код для приложения для рисования.

Это базовая структура нашего приложения для рисования с использованием HTML, и теперь мы можем перейти к его стилизации с помощью CSS.

Шаг 2 (код CSS)

Когда базовая HTML-структура приложения для рисования создана, следующим шагом будет добавление стилей к приложению для рисования с помощью CSS. CSS позволяет нам контролировать внешний вид веб-сайта, включая такие вещи, как макет, цвет и типографика.

Далее мы создадим наш файл CSS. В этом файле мы будем использовать некоторые основные правила CSS для создания нашего приложения для рисования.

Вот объяснение каждой части:

1. Первый блок кода применяет стили к элементам html и body:
   • width: 100% - устанавливает ширину элементов html и body, равной 100% ширины области просмотра;
   • height: 100% - устанавливает высоту элементов html и body, равной 100% высоты области просмотра;
   • margin: 0px - удаляет все поля вокруг элементов html и body;
   • overflow: hidden - скрывает любое содержимое, превышающее размеры элементов html и body, предотвращая прокрутку.
2. Второй блок кода нацелен на элементы span, которые являются дочерними элементами html или body при наведении на них указателя мыши:
   • display: none - скрывает элементы span при наведении на них курсора. Другими словами, текст внутри элементов span исчезнет при наведении курсора мыши на страницу.
3. Следующий блок кода нацелен на элементы canvas:
   • cursor: crosshair - изменяет курсор на форму перекрестия, когда он находится над элементом canvas. Это свойство часто используется, чтобы указать, что элемент является интерактивным или кликабельным.
4. Последний блок кода нацелен на все элементы span:
   • font-family: 'Georgia', cursive - устанавливает семейство шрифтов элементов span в «Georgia» или курсивный шрифт, если «Georgia» недоступен;
   • font-size: 40px - устанавливает размер шрифта элементов span, равным 40 пикселям;
   • position: fixed - размещает элементы span относительно окна просмотра, то есть они останутся в одном и том же положении даже при прокрутке страницы;
   • top: 50% - устанавливает верхнее положение элементов span на 50% высоты области просмотра;
   • left: 50% - устанавливает левое положение элементов span равным 50% ширины области просмотра;
   • color: #000 - устанавливает черный цвет текста внутри элементов span;
   • margin-top: -40px - смещает верхнюю позицию элементов span на -40 пикселей. Это помогает центрировать элементы по вертикали, перемещая их вверх на половину их высоты;
   • margin-left: -200px - смещает левую позицию элементов span на -200 пикселей. Это помогает центрировать элементы по горизонтали, перемещая их влево на половину ширины.

Эти строки кода придадут вашему приложению для рисования обновленную презентацию - более красочный вид. Создайте файл CSS с именем style.css и вставьте строки кода в свой файл CSS.

И помните, что вы должны создать файл с расширением .css.

Шаг 3 (код JavaScript)

Наконец, нам нужно написать необходимые функции в JavaScript — код JS создает простой интерактивный холст для рисования на веб-странице. Он инициализирует переменные и определяет функции для обработки событий мыши и рисования на холсте.

Код начинается с определения различных переменных, таких как начальная позиция, счетчик, минимальный размер шрифта, угловое искажение и строка букв. Он также создает переменные для холста, его контекста и положения мыши.

• Функция init инициализирует холст и устанавливает его размер в соответствии с размерами окна. Он также добавляет прослушиватели событий для движений мыши, щелчков и изменения размера окна.
• Функция mouseMove обновляет положение мыши всякий раз, когда происходит движение мыши, и вызывает функцию draw.
• Функция draw отвечает за рисование на холсте. Она проверяет, нажата ли кнопка мыши, и вычисляет расстояние между текущей позицией мыши и предыдущей позицией, определяет размер шрифта на основе расстояния и выбирает букву из строки, рассчитывает размер шага на основе ширины буквы в выбранном размере шрифта. Если расстояние больше размера шага, вычисляется угол между позицией мыши и предыдущей позицией. Функция устанавливает шрифт и применяет преобразование поворота к контексту холста. Затем она рисует букву в преобразованном положении. Счетчик увеличивается, и если он превышает длину строки букв, он возвращается к началу. Положение обновляется на основе угла и размера шага.
• Функция Distance вычисляет евклидово расстояние между двумя точками.
• Функция mouseDown устанавливает состояние мыши «Down» и обновляет исходное положение до текущего положения мыши. Он также скрывает элемент с идентификатором «info».
• Функция mouseUp устанавливает состояние мыши «Up».
• Функция doubleClick очищает холст, устанавливая его ширину равной самой себе.
• Функция textWidth вычисляет ширину заданной строки текста при заданном размере шрифта.
• Наконец, вызывается функция init для инициализации холста и настройки прослушивателей событий.

Создайте файл JavaScript с именем script.js, вставьте указанные строки кода в ваш файл и убедитесь, что он правильно связан с вашим HTML-документом, чтобы сценарии выполнялись на странице. Помните, что вы должны создать файл с расширением .js.

Заключение

Поздравляем с завершением урока по созданию текстового приложения для рисования с использованием HTML, CSS и JavaScript! Следуя этому руководству, вы получили ценные знания и навыки создания интерактивных приложений и раскрытия своего творчества в Интернете.

В этом руководстве мы рассмотрели основные этапы создания текстового приложения для рисования. Мы начали с настройки проекта, создания необходимых файлов HTML, CSS и JavaScript и их соединения. Затем мы построили структуру приложения, включая элемент холста и элементы управления рисованием. Мы реализовали функцию рисования на основе текста и добавили стили для настройки внешнего вида приложения. Мы также добавили интерактивности, обрабатывая пользовательский ввод и реализуя дополнительные функции.

Вы можете добавить больше инструментов для рисования, внедрить расширенные функции работы с текстом или даже интегрироваться с внешними API для дополнительных функций.

Создание текстового приложения для рисования — лишь единичный пример того, чего можно добиться с помощью HTML, CSS и JavaScript. Мы надеемся, что это руководство вдохновило вас на изучение новых возможностей и дальнейшее оттачивание навыков веб-разработки.