Обучение работе с Canvas
Проходя тесты на Upwork столкнулся с проблемой что я очень мало знаю про Canvas. Да и с тем что я хочу делать веб приложения такие технологии мне пригодятся. А знаний как построить прямоугольник на canvas достаточно мало.
Поэтому я создаю маленькую цель в которой я познакомлю вас с успехами и другими сложностями что возникли.
С ресурсов долго не искал взял первые попавшиеся, что буду находит нового буду писать в прохождение цели.
https://developer.mozilla.org/en-US/docs/Web/API/C...
http://creativejs.com/2011/08/31-days-of-canvas-tu...
Критерий завершения
Прохождение туториолов, повышения знаний
Личные ресурсы
Время, желания учится
Вывод
От начальных ресурсов пришлось отказатся от всего что хотел использовать и для узучения скачал готовый курс с примерами от Lynda. Моя цель получилась выполнена поскольку я получил знания которые пригодятся для прохождения тестов на UpWork .
Все наведеннные примеры огорчили потому что такое можно сделать на SVG и гораздо проще. Слайдер и анимация получаются в реализации довольно заморочливые. Может конечно есть библиотеки для упрощения работы. Но просчеты координат занимают время. Я даже сказал бы что нехватает инструмента для рисовки.
С позитивного канвас позволяет с помощью одного тега делать интерактивный вывод графиков . Это довольно просто не потребует много знаний и пр этом хорошо визуализирует информацию. В Canvas гораздо больше поддержка чем в SVG и некоторых CSS свойств. Я еще вернусь к целе или создам вторую часть поскольку заорелся идеей игрушки. Но сейчас жизнь ставит новые цели и буду двигатся к ним.
Дневник цели
Сегодня закончил все видео по теме канвас. Последнии видео были о создании слайдера и работе с анимацией.
Слайдер получился не очень функциональный поскольку обычный слайдер сделаный дивами будет намного лучше.
Анимация тоже огорчила. Оказывается на каждый шаг изменений канвас полностью все перерисовывает и для создания снежинок нужно создавать уже 2 канваса и и писать еще больше кода и это все будет в рамках канвас.
Вот на такой писимистичном отчете закрывать буду цель
повторять примеры после кривых Бизье закончил, поскольку в основном примеры построены на перемещении прямоугольника.
С самого крутого понравились эфекты смешивания слоев и обрезки.
Праздники немного быбили с расписания и графика обучения. Но сегодня я крепко засел за Canvas. Но чем дальше иду тем больше разочаровываюсь. В SVG все немного быстрей и удобней и понятней + можно его если что подпилить с помощью стилей. Пока в Canvas вижу только плюс больше поддержку браузерами и меньше каши в HTML поскольку понадобится 1-3 тега а все остальное будет в скриптах.
Может есть редактор Canvas после курса посмотрю, но пока не увидел преспективы и после завершения курса отложу его в дальний ящик.
Курсы с Линды оказались приятнее и проще. Есть исходный код есть объяснение что к чему и почему так.
И так сегодня порисовал прямоугольник прямую текст покрасил добавил тень поигрался с размерами. Довольно это интересная штука Canvas
Начало положено вот собственно гит
https://github.com/slastonm/jsEducation/tree/maste...
оба ресурса меня подвели они очень краткие, а я очень ленивый лазить по документации .
Поэтому скачал курсы Lynda. com по канвасу. посмотрел вступление мне нравится.
Дальше будет ...
И так цель с укреплением знаний по джс закончена. Возвращаюсь к канвасу. Создаю первые комиты и скоро будут отзывы. У меня есть не большой опыт постройки прямой и графика с массивов. Но думаю по окончанию цели смогу что то большое
Я здесь тема не заброшена просто я сейчас увлёкся книгой очень и решил что параллельно 2 цели будет не очень удобно да и по времени рассеяно. Поэтому как только закрою цель https://smartprogress.do/goal/152740/ сразу же приступлю к канвасу
