Создайте веб-приложение для рисования на доске с использованием HTML5 Canvas

Введение

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

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

настраивать HTML-структуру для веб-приложения с доской для рисования;
создавать и получать 2D-контекст рендеринга для HTML-элемента <canvas>;
реализовывать слушатели событий для отслеживания действий мыши при рисовании;
добавлять кнопку "Очистить" и реализовывать функциональность очистки холста;
создавать элемент ввода для выбора цвета и реализовывать функциональность изменения цвета кисти;
добавлять диапазонный ввод для настройки размера кисти и реализовывать функциональность.

🏆 Достижения

После завершения этого проекта вы сможете:

создавать базовую структуру веб-страницы с использованием HTML;
использовать слушатели событий JavaScript для обработки взаимодействия с пользователем;
работать с HTML-элементами <canvas> для рисования;
стилизовать веб-приложение с использованием CSS;
комбинировать HTML, CSS и JavaScript для создания функциональной доски для рисования.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/dom_select -.-> lab-445711{{"Создание веб-приложения для рисования на доске"}} javascript/dom_manip -.-> lab-445711{{"Создание веб-приложения для рисования на доске"}} javascript/event_handle -.-> lab-445711{{"Создание веб-приложения для рисования на доске"}} javascript/dom_traverse -.-> lab-445711{{"Создание веб-приложения для рисования на доске"}} end

Создайте HTML-структуру

Требования:

Откройте файл index.html.
Установите базовую HTML-структуру в index.html с использованием холста, заголовка и элементов управления.

Функциональность:

Создаются файлы проекта и базовая HTML-структура, но еще нет функциональности рисования.

Шаги:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Drawing Board</title>
  </head>
  <body>
    <header>
      <h1>Drawing Board</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Размер кисти:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Очистить</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

✨ Проверить решение и практиковаться

Добавление холста

Требования:

В index.html добавьте элемент <canvas> с идентификатором "whiteboard" и размерами (ширина и высота), выбранными вами.

Функциональность:

Холст будет добавлен на веб-страницу, но он не будет иметь никаких способностей рисования.

Шаги:

<body>
  <header>
    <h1>Drawing Board</h1>
  </header>
  <div class="container">
    <!--add canvas-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Размер кисти:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Очистить</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

✨ Проверить решение и практиковаться

Добавление функциональности рисования

Требования:

В script.js добавьте код на JavaScript, чтобы включить рисование на холсте при нажатии и перемещении мыши.
Реализуйте слушатели событий для событий mousedown, mouseup и mousemove.

Функциональность:

Теперь пользователи могут рисовать на холсте с использованием мыши.

Шаги:

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

Этот код позволяет рисовать на холсте при нажатии и перемещении мыши.

✨ Проверить решение и практиковаться

Добавление функциональности очистки

Требования:

В script.js добавьте код на JavaScript, чтобы очистить холст при нажатии кнопки "Очистить".
Создайте кнопку в index.html с идентификатором "clear-btn".

Функциональность:

Пользователи могут очистить холст, чтобы начать новое рисование.

Шаги:

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

Этот код позволяет пользователям очистить холст, нажав кнопку "Очистить".

✨ Проверить решение и практиковаться

Добавление управления цветом кисти

Требования:

В script.js добавьте код на JavaScript, чтобы позволить пользователям выбирать цвет кисти с использованием элемента <input type="color">.
Создайте элемент выбора цвета в index.html с идентификатором "color-picker".

Функциональность:

Пользователи могут выбирать цвет для своей кисти.

Шаги:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

Этот код позволяет пользователям выбирать цвет кисти с использованием элемента выбора цвета.

✨ Проверить решение и практиковаться

Добавление управления размером кисти

Требования:

В script.js добавьте код на JavaScript, чтобы позволить пользователям настраивать размер кисти с использованием элемента <input type="range">.
Создайте элемент ввода диапазона в index.html с идентификатором "brush-size".

Функциональность:

Пользователи могут изменить размер кисти, чтобы сделать более толстые или тонкие линии.

Шаги:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

Этот код позволяет пользователю настраивать размер кисти с использованием элемента ввода диапазона.

✨ Проверить решение и практиковаться

CSS-стилизация

Требования:

Откройте файл styles.css.
Добавьте CSS-стили, чтобы сделать веб-приложение визуально привлекательным.

Функциональность:

Примените базовые стили к элементам веб-приложения.

Шаги:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

✨ Проверить решение и практиковаться

Запуск приложения

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

✨ Проверить решение и практиковаться

Резюме

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