Приложение для рисования на HTML, CSS и JavaScript

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

Хотите изучать программирование с интерактивными заданиями? Присоединяйтесь к нашему приложению Кодик и прокачайте свои навыки!

Читать статью

Смотреть демо

🚀 Начало работы

Чтобы запустить проект локально, выполните следующие шаги:

1. Склонируйте репозиторий:

   bash git clone https://github.com/Coursme/drawing-app-js.git

2. Перейдите в директорию проекта:

bash cd drawing-app-js

3. Откройте файл index.html в вашем браузере.

📂 Структура проекта

drawing-app-js/
├── index.html        # Главный HTML файл
├── style.css         # Файл со стилями
├── icons             # Иконки
└── script.js         # Основной JavaScript файл

✨ Функционал приложения

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

🔧 Подробности реализации

HTML (index.html)

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

CSS (style.css)

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

JavaScript (script.js)

• JavaScript добавляет интерактивность и логику приложения:
• Управление рисованием на холсте с использованием различных инструментов.
• Сохранение изображения и очистка холста.
• Обработка выбора инструментов и цветов, а также настройка размера кисти.

🖥️ Демонстрация

Вы можете увидеть демонстрацию приложения по следующей ссылке: Демо приложения

📚 Подробнее о проекте

Если вы хотите узнать больше о том, как было создано приложение, ознакомьтесь с этой статьей: Читать статью

🤝 Вклад в проект

Если у вас есть идеи по улучшению проекта или вы нашли баги, не стесняйтесь создавать issues или делать pull requests. Мы будем рады вашему участию!

📄 Лицензия

Этот проект находится под лицензией MIT.

⚡️ Присоединяйтесь к нам

Хотите изучать программирование с интерактивными заданиями? Присоединяйтесь к нашему приложению Кодик и прокачайте свои навыки!