Доработать HTML страницу - рисование на canvas
1000 UAHЕсть вот такое приложение, которое позволяет рисовать на экране через canvas.
https://github.com/williammalone/Simple-HTML5-Drawing-App
Вот здесь чуть подробнее: http://www.williammalone.com/projects/html5-canvas-javascript-drawing-app-with-bucket-tool/
Нужно внести несколько изменений:
1. Увеличить площадь рисования.
Сейчас это что-то типа 490х220. В идеале нужно сделать так, чтоб рабочая область подстраивалась под фоновое изображение (об этом ниже). Т.е. если меняется фоновое изображение, то все элементы (кисти и прочие кнопки) должны располагаться слева и справа равномерно. Ну или можно перенести их на одну сторону, если так легче будет.
2. Добавить возможность сохранять нарисованное в файл.
Вот здесь другой пример приложения для рисования, в котором реализовано сохранение в файл.
https://wanago.io/2019/06/24/creating-a-simple-drawing-app-using-canvas-saving-and-loading-images/
Возможно, будет полезно. Ну или можете предложить свое решение, как вам будет удобнее. Там еще есть загрузка своего изображения, но это не требуется.
3. Тут вытекающее из п.1
Такие приложения будут использоваться для разных упражнений, которые будут отличаться только фоновой картинкой поверх которой и будут рисовать. Нужно чтобы процесс создания новых заданий был максимально прост: скопировал всю папку с новым именем, заменил в ней фоновую картинку и готово. Поэтому и хотелось бы, чтоб в п.1 область рисования могла растягиваться по размеру картинки.
Итак, еще раз в двух словах как это будет работать. Сам html файл будет встроен в страницу сайта через iframe или через софт для создания курсов (типа Articulate Storyline). Пользователь видит фоновую картинку и рисует на ней по заданию, используя разные цвета и инструменты. После этого, он нажимает кнопку Save Image и сохраняет картинку себе на компьютер, а потом загружает через сайт на проверку.
Во вложении две картинки для примера. Так будут выглядеть задания. Задания для маленьких детей. Само приложение из п.1 поддерживает рисование на сенсорных экрнах, поэтому эта функция должна сохраниться. Наапример, в первом упражнении нужно нарисовать букву Т (будет выполняться пальцем на планшете или телефоне). А во втором закрасить буквы нужным цветом.
Приложения 2
Отзыв заказчика о сотрудничестве с Юрием Никоненко
Доработать HTML страницу - рисование на canvasВсе сделано точно по ТЗ и оперативно. Всегда на связи, дает полезные советы. В общем, рекомендую к сотрудничеству.
Отзыв фрилансера о сотрудничестве с Виктором Волком
Доработать HTML страницу - рисование на canvasВиктор хороший заказчик, рекомендую к сотрудничеству.
-
3759 111 3 5 Здравствуйте, Виктор.
Готов доработать функционал согласно ТЗ.
С уважением, Юрий
-
775 21 0 Здравствуйте, есть опыт в создании приложения для рисования, также делал экспорт картинки в соцсети(по аналогии можно будет скачать).
Обращайтесь, покажу вам пример своей работы. Цену и сроки обсудим в ходе общения
-
1158 37 3 3 Здравствуйте, с канвасом работал, я попросту буду добавлять туда фон в него и разрешать рисования, сделаю адаптивным под разрешения экрана то приложение которые вы кинули с гитхаба и буду сохранять отдельным файлом, пока, я предплогаю, что сервер тут не нужен отдельный будет и всё можно будет сделать через javascript. Давайте сотрудничать, постраюсь выполнить в ваши сроки и бюджет. Сроки и бюджет тут примерный. 5-7 дней. Мой телеграм есть в моём профиле и обязательно напишите в личные сообщения, работаю через безопасную сделку.
Актуальные фриланс-проекты в категории Javascript и Typescript
Обновление дизайна на сайтеНужно обновить дизайн существующего сайта используя HTML, CSS, JS: освежить внешний вид, сделать его современным и адаптивным под мобильные устройства. Требуется добавить плавные анимации и интерактивные элементы . HTML и CSS верстка, Javascript и Typescript ∙ 7 часов 45 минут назад ∙ 61 ставка |
Консультация и аудит текущего проекта на Odoo 19 Community EditionИщем Odoo разработчика — соло-разработчика с опытом разработки на Odoo 19 Community Edition, в том числе с использованием Claude Code. Нам нужен специалист, который успешно реализовал проекты в Odoo и имеет практический опыт разработки с использованием Claude Code. Важно:… C и C++, Javascript и Typescript ∙ 13 часов 25 минут назад ∙ 5 ставок |
Интернет-магазин одеждыНужен разработчик для интернет-магазина одежды Ищу опытного разработчика для создания полноценного интернет-магазина одежды с дроп-моделью продаж. Что нужно сделать: 6 страниц: главная, товар, корзина, оформление, аккаунт, админ панель Вход через Google аккаунт Корзина и… HTML и CSS верстка, Javascript и Typescript ∙ 2 дня 10 часов назад ∙ 98 ставок |
Full-stack разработка — Amazon PPC Dashboard (Stage 1)Нужен full-stack разработчик с опытом работы с Amazon API для реализации Stage 1 внутреннего PPC-дашборда. Проект реальный, данные живые, всё готово к старту. Прототип фронтенда (5 страниц, React + TypeScript): ЧТО УЖЕ ГОТОВО — Фронтенд-прототип на React 18 + TypeScript + Vite… Javascript и Typescript, Веб-программирование ∙ 4 дня 21 час назад ∙ 32 ставки |
Разработка сайта-конструктора фотокниг и фоторамокЦель проекта Необходимо разработать современный веб-сайт для заказа фотокниг, фоторамок и другой персонализированной фотопродукции. Главная задача проекта — предоставить клиенту возможность самостоятельно создать готовый макет изделия непосредственно на сайте без участия… Javascript и Typescript, Веб-программирование ∙ 6 дней 13 часов назад ∙ 99 ставок |