Html5 canvas: Canvas tutorial — Web APIs

Canvas — Элемент HTML5 / Хабр

Элемент HTML5

Статьи Авторы Компании

Сначала показывать

Порог рейтинга

Уровень сложности

yantishko

23 авг 2021 в 17:07

Время на прочтение 7 мин

Количество просмотров

4.3K

Работа с видео *JavaScript *Обработка изображений *Canvas *ReactJS *

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

Сегодня я хочу поделиться реализацией такого блюра/пикселизации видео (изображения) в вебе.

Читать далее

Всего голосов 10: ↑9 и ↓1 +8

Комментарии 19

vgaidadei

000Z» title=»2021-07-22, 12:39″>22 июл 2021 в 12:39

Время на прочтение 3 мин

Количество просмотров

6.6K

JavaScript *HTML *Canvas *

Из песочницы

Ссылка на GitHub

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

Читать

Всего голосов 9: ↑9 и ↓0 +9

Комментарии 2

ru_vds

7 июн 2021 в 20:12

Время на прочтение 7 мин

Количество просмотров

23K

Блог компании RUVDS.com Разработка веб-сайтов *Canvas *

Перевод

В последнее время было немало горестных рассуждений о последствиях решения Google использовать HTML-элемент <canvas> для рендеринга всего, что видно на экране при работе с Google Docs. И то, что это многих беспокоит, вполне понятно. Когда-то веб был задуман как система для работы с тщательно структурированной информацией, полной осмысленных метаданных и рассчитанной на совместное её использование многими людьми. Но, вместо этого, тот веб, который мы видим сегодня, представляет собой довольно сложно и запутанно устроенные приложения, которые работают в браузерных «песочницах».

Решение Google, которое заключается в том, чтобы перейти от вывода на страницы HTML-элементов к рисованию пикселей на <canvas>, нельзя назвать чем-то таким, чего раньше никто не видел и не пробовал. Другие передовые веб-приложения уже вышли далеко за пределы традиционных схем работы с HTML-элементами. Так, в Google Maps вывод данных на <canvas> используется уже многие годы. В VS Code для отрисовки идеального интерфейса терминала тоже используется <canvas>. А в подающем надежды наборе инструментов Google Flutter, который позволяет создавать кросс-платформенные интерфейсы, в веб-браузере, по умолчанию, используется рендеринг с использованием <canvas>.

Но в этот раз происходящее вызывает несколько иные ощущения. А именно, появляется такое чувство, что рендеринг в <canvas> и другие современные технологии, вроде WebAssembly, увели нас за точку невозврата. Все привыкли к схеме работы, когда страница загружает, в виде обычного текста, JavaScript-код, который выполняется, взаимодействуя с HTML-элементами, видимыми в «инструментах разработчика». Сейчас возникает такое впечатление, что это — лишь небольшой этап на пути постоянно развивающихся технологий веб-разработки.

Читать дальше →

Всего голосов 74: ↑72 и ↓2 +70

Комментарии 102

egaxegax

5 мая 2021 в 21:21

Время на прочтение 2 мин

Количество просмотров

9.5K

JavaScript *Работа с векторной графикой *HTML *Canvas *

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

svg-движке, сравнивая с канвасным отображением.

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

Читать далее

Всего голосов 6: ↑5 и ↓1 +4

Комментарии 14

mauphes

4 мая 2021 в 11:17

Время на прочтение 6 мин

Количество просмотров

2.5K

Блог компании Домклик JavaScript *Canvas *ReactJS *

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

Читать далее

Всего голосов 50: ↑50 и ↓0 +50

Комментарии 0

kylikovskix

000Z» title=»2021-04-16, 23:36″>

16 апр 2021 в 23:36

Время на прочтение 4 мин

Количество просмотров

32K

JavaScript *Программирование *Разработка игр *Canvas *Математика *

Всем доброго дня или ночи! Затронутая в статье, тема может показаться настолько избитой до популярности, что при ее прочтении возникнет стойкое желание взять помидор или, не дай бог, кирпич и кинуть в автора. А изложенные мысли будут напоминать повторное изобретение велосипеда с квадратными колесами. Но идея, побудившая приступить к описанию, буквально зудит и проситься ей поделиться, несмотря на угрозу физического или морального наказания.

Читать далее

Всего голосов 85: ↑84 и ↓1 +83

Комментарии 42

technokratiya

16 фев 2021 в 16:24

Время на прочтение 6 мин

Количество просмотров

19K

Разработка веб-сайтов *JavaScript *Работа с 3D-графикой *Canvas *IT-компании

Привет, это блог «Технократии». Обычно мы занимаемся цифровой трансформацией бизнеса, но сегодня у нас для вас история, как при помощи библиотеки three.js и шейдеров мы сделали лендинг для нашей промо-кампании. Главный рассказчик — разработчик Артем Ибатуллин.

Читать далее

Всего голосов 13: ↑11 и ↓2 +9

Комментарии 11

virus-net-ru

9 фев 2021 в 12:26

Время на прочтение 9 мин

Количество просмотров

7K

JavaScript *Canvas *API *Голосовые интерфейсы *

Знакомство с виртуальными ассистентами Салют, а также с платформой SmartMarket и SmartApp.

Путь от chat app до canvas app или как создать canvas app на платформе SmartMarket.

Читать далее

Всего голосов 11: ↑10 и ↓1 +9

Комментарии 2

IDriuk

000Z» title=»2021-01-22, 14:06″>22 янв 2021 в 14:06

Время на прочтение 3 мин

Количество просмотров

2.3K

JavaScript *Canvas *Учебный процесс в IT

Привет Хабр! Попалась недавно интересная библиотечка , которая создает эффект конфетти на страничке. Решил разобраться , что же там внутри находится и как работает. Подробности под катом

Читать далее

Всего голосов 1: ↑1 и ↓0 +1

Комментарии 0

notyourhero

25 дек 2020 в 17:24

Время на прочтение 6 мин

Количество просмотров

19K

Блог компании TINKOFF JavaScript *Клиентская оптимизация *Canvas *ReactJS *

Из песочницы

В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия — в кино, театры, на концерты, спортивные события можно на https://www.

tinkoff.ru/entertainment/, а также в мобильном приложении.

Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.

Читать далее

Всего голосов 54: ↑54 и ↓0 +54

Комментарии 30

ivan_denisov

30 ноя 2020 в 12:51

Время на прочтение 6 мин

Количество просмотров

2K

Open source *JavaScript *HTML *Canvas *Инфографика

Из песочницы

Занимательное дело — создавать образовательные модели. Приятно видеть, что человек понял что-то, взаимодействуя с твоей программой. Начинал делать модели в Matlab, пробовал использовать Flash и язык ActionScript, пока не узнал про Блэкбокс и Оберон, который идеально лёг на моё представление о том, сколько вообще язык программирования должен занимать в голове у специалиста предметной области. Однако в 21-веке люди просто боятся запускать компилированные приложения, и антивирусы часто дают ложно-положительные срабатывания. Как быть? Для дистрибуции образовательных приложений нужно было использовать браузерные технологии JavaScript и HTML5. В публикации разбирается, как удалось объединить Оберон и HTML5 canvas для создания интерактивных моделей онлайн.

Читать далее

Всего голосов 12: ↑12 и ↓0 +12

Комментарии 27

yevgen12

28 ноя 2020 в 05:03

Время на прочтение 8 мин

Количество просмотров

3.4K

JavaScript *HTML *Canvas *Визуализация данных *Дизайн игр *

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

Искусственный горизонт в рассматриваемом здесь узком смысле представляет собой визуализацию наклона объекта относительно местной вертикали, используемую для управления его движением. Наклон определяется значениями двух углов Эйлера, крена и тангажа. Авиационному термину «тангаж» моряки предпочитают синоним «дифферент».

Читать дальше →

Всего голосов 8: ↑8 и ↓0 +8

Комментарии 3

degenerative_art

28 окт 2020 в 13:56

Время на прочтение 7 мин

Количество просмотров

1.8K

JavaScript *Алгоритмы *Canvas *Визуализация данных *Экология

Перевод

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

И поэтому мы подумали о создании «живого окна», которое показывает погоду и её изменение. Мы решили создать веб-приложение, которое будет показывать нынешние погодные условия, используя природный ландшафт, созданный путём вычислений, но в то же время эстетично. Другими словами, при помощи генеративного искусства.

Читать далее

Всего голосов 7: ↑7 и ↓0 +7

Комментарии 0

vlad1953

6 июл 2020 в 12:35

Время на прочтение 6 мин

Количество просмотров

4.2K

JavaScript *Работа с 3D-графикой *Canvas *Математика *WebGL *

Туториал

Трехмерную графику можно реализовать в браузере не только применяя WebGL или
библиотеки созданные на основе WebGL, но и путем простой отрисовки на 2D-холсте используя для этого функции HTML5 Canvas.

Существует множество книг, статей и информации в интернет о том как использовать холст
HTML5 Canvas для отображения рисунков, графиков и даже анимации в некоторых браузерных играх.

Однако практически никогда не рассматривается возможность непосредственного использования холста для отображения трехмерных объектов.

Остановимся на этом чуть подробнее.

Если создается трехмерная компьютерная игра, например 3D-шутер, то разработчики стараются сделать ее как можно более реалистичной и используют для этого графические ускорители. В этом случае без соответствующих программных инструментов обойтись не удастся. Для таких игр в браузере есть прямой смысл использовать WebGL и Three.js. Самое главное, что с помощью шейдеров предназначенных для этих программных инструментов можно осуществить реалистичное освещение сцены и находящихся на сцене объектов.

Но если требуется просто показать трехмерный объект со всех сторон, то можно обойтись без WebGL и шейдеров. Например некоторые программы CAD/CAM предназначены только для моделирования формы объектов и не предполагают использования реалистичного освещения.

На сайте Canvas и геометрия я последовательно и очень подробно объясняю как используя исключительно HTML5 Canvas можно создать изображения 3D-моделей многогранников.

Читать дальше →

Всего голосов 6: ↑2 и ↓4 -2

Комментарии 5

SimbirSoft_frontend

26 июн 2020 в 07:14

Время на прочтение 6 мин

Количество просмотров

4.5K

Блог компании SimbirSoft Разработка веб-сайтов *Canvas *ReactJS *

Иногда в приложении надо показать модель помещения – допустим, кинотеатра или даже целого стадиона, если вы продаете билеты на концерт Metallica. Если в зале 50-100 тысяч мест, то для их вывода на экран нужно продумать плавный zoom, скроллинг и другие детали. Итак, главный вопрос – как показывать тысячи элементов на экране, чтобы это было удобно для пользователей?

Недавно мы писали о скроллинге диаграмм с помощью d3.js, а сейчас хотим поделиться другим кейсом. Рассказываем, как с помощью Canvas можно разработать интерактивную схему зала, которую просто встраивать в любые веб-приложения.

Читать дальше →

Всего голосов 8: ↑7 и ↓1 +6

Комментарии 4

EpicLegend_gg

14 июн 2020 в 12:40

Время на прочтение 2 мин

Количество просмотров

16K

CSS *JavaScript *HTML *Canvas *

Туториал

Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.

Читать дальше →

Всего голосов 4: ↑2 и ↓2 0

Комментарии 0

ru_vds

000Z» title=»2020-04-14, 12:30″>14 апр 2020 в 12:30

Время на прочтение 10 мин

Количество просмотров

4.3K

Блог компании RUVDS.com Разработка веб-сайтов *JavaScript *Клиентская оптимизация *Canvas *

Перевод

Рендеринг диаграмм может серьёзно нагрузить работой браузер. Особенно если речь идёт о выводе в интерфейсе сложного приложения множества элементов, представляющих диаграммы. Попытаться улучшить ситуацию можно с помощью интерфейса OffscreenCanvas, уровень поддержки которого браузерами постепенно растёт. Он позволяет, задействовав веб-воркер, переложить на него задачи по формированию изображения, выводимого в видимый элемент <canvas>.

Статья, перевод которой мы сегодня публикуем, посвящена использованию интерфейса OffscreenCanvas. Здесь речь пойдёт о том, зачем может понадобиться этот интерфейс, о том, чего реально ожидать от его применения, и о том, какие сложности могут возникнуть при работе с ним.

Читать дальше →

Всего голосов 37: ↑37 и ↓0 +37

Комментарии 0

Kempston

4 апр 2020 в 17:02

Время на прочтение 10 мин

Количество просмотров

2.4K

JavaScript *Разработка игр *Canvas *Расширения для браузеров Продвижение игр *

Недавно у нас с другом зашел разговор о карточных играх. Он сказал, что умеет играть только в покер, но и то давно этого не делал, потому что забыл все комбинации. Вот и поговорили… Я вспомнил, что пару лет назад я написал пять карточных игр, включая покер Техасский Холдем, где в любой момент в процессе игры можно посмотреть не только собранные комбинации, но и все потенциально возможные варианты с еще не открытыми картами. Это вполне могло бы стать обучающим пособием и помочь освежить в памяти правила в процессе игры с ботами.

Я решил заняться рефакторингом своего старого кода, а также, подправить графику. Дизайн мне всегда давался с трудом, это не мое. Рассчитывая хоть на какое-то вдохновение, я включил саунд-трек из GTA San-Andreas, тот, что с кантри-музыкой, с радио K-Rose. Мне кажется, что он хорошо передает атмосферу Лас-Вегаса. Я там никогда не был, но точно передает! Клянусь своей звездой шерифа. (Если что — она пластиковая, так что, не жалко…) И даже не поленился зайти в саму легендарную игру и прокатиться по Лас-Вентурасу, виртуальному прототипу мировой игорной столицы.

Всего голосов 9: ↑7 и ↓2 +5

Комментарии 2

Amedomary

25 фев 2020 в 07:29

Время на прочтение 2 мин

Количество просмотров

3K

JavaScript *Canvas *

Туториал

В попытках оптимизировать 2D анимацию созданную в canvas, был найден один интересный вариант.

Предварительная визуализация — prerender.

«А что если записать все кадры заранее и показать их после окончания анимации?» — подумали мы с товарищем и вот что получилось на следующий день.

Читать дальше →

Всего голосов 15: ↑12 и ↓3 +9

Комментарии 6

lipton_ice_tea

30 янв 2020 в 16:16

Время на прочтение 4 мин

Количество просмотров

8.7K

Разработка веб-сайтов *JavaScript *Canvas *Maps API *

Доброго времени суток, дорогие хабрахабровцы!

Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.

Читать дальше →

Всего голосов 10: ↑10 и ↓0 +10

Комментарии 1

Canvas — Элемент HTML5 / Хабр

Элемент HTML5

Статьи Авторы Компании

Сначала показывать

Порог рейтинга

Уровень сложности

eyudinkov

000Z» title=»2023-01-25, 17:21″>25 янв в 17:21

Время на прочтение 6 мин

Количество просмотров

2.4K

JavaScript *Алгоритмы *Canvas *

Привет! Мы продолжаем цикл статей по базовым принципам работы с canvas. Сегодня мы рассмотрим L-системы в качестве примера для создания различных интересных визуализаций.

Так что же такое L-ситемы? L-системы (или системы Линденмайера) — это набор простых правил, которые используются для моделирования роста водорослей (и не только), созданные венгерским биологом Аристидом Линденмайером в 1968 году.

Читать далее

Всего голосов 10: ↑10 и ↓0 +10

Комментарии 4

ushliypakostnik

25 дек 2022 в 03:13

Время на прочтение 11 мин

Количество просмотров

4.3K

JavaScript *Разработка игр *Canvas *VueJS *TypeScript *

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем, я предпринял еще одну попытку крафтового браузерного геймдева «на javascript», и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в неудовлетворительную производительность получающейся разработки, заскучал и уже почти год как забросил это дело. Но у меня вполне получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать здания. Поэтому хочу, прежде всего, поставить точку для себя самого, немного рассказав и о данной затее — возможно, для кого-то окажутся полезными мои усилия, изыскания. Статья не будет такой объемной, дотошной и разнообразной как первая о создании действительно полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так как использует более актуальный стек из Vue3 и TypeScript. Во многом, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я совсем не буду повторять то что было уже пройдено и рассмотрено на первом примере, бегло покажу только «новые фичи».

Читать далее

Всего голосов 12: ↑11 и ↓1 +10

Комментарии 1

jackycoins

26 ноя 2022 в 16:32

Время на прочтение 9 мин

Количество просмотров

4.3K

JavaScript *OpenStreetMap *Canvas *Maps API *ReactJS *

Из песочницы

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

Читать далее

Всего голосов 14: ↑12 и ↓2 +10

Комментарии 16

Kempston

000Z» title=»2022-10-02, 23:25″>2 окт 2022 в 23:25

Время на прочтение 6 мин

Количество просмотров

36K

Разработка игр *Canvas *WebGL *

Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо. .. Короче говоря, перевозить древесину и шелк, как в обычных играх — это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.

Читать далее

Всего голосов 105: ↑95 и ↓10 +85

Комментарии 59

vlad1953

9 сен 2022 в 11:37

Время на прочтение 5 мин

Количество просмотров

2.6K

Canvas *Математика *WebGL *Физика

Туториал

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

Читать далее

Всего голосов 12: ↑12 и ↓0 +12

Комментарии 0

arkhwise

000Z» title=»2022-08-02, 11:11″>2 авг 2022 в 11:11

Время на прочтение 7 мин

Количество просмотров

2.4K

Блог компании Skyeng Работа с видео *JavaScript *Canvas *Видеоконференцсвязь

Привет! На связи Влад из команды видеоплатформы Skyeng. Мы отвечаем за аудио и видео коммуникацию в образовательных продуктах, применяем WebRTC и реализуем фичи вокруг Video Conferencing. О реализации одной из них хочу рассказать: мы сделали видеоэффекты для веба.

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

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

Все сошлось. Решили делать.

Читать далее

Всего голосов 14: ↑14 и ↓0 +14

Комментарии 1

DoctorGester

1 авг 2022 в 13:00

Время на прочтение 4 мин

Количество просмотров

22K

Блог компании Wrike Разработка игр *Canvas *Управление проектами *TypeScript *

 TL;DR: игра по ссылке.

Наверняка многие из вас в детстве баловались игрушками вроде «ПРОГРАММИСТ 1.3» — эдакими текстовыми квестами, в которых игрок должен был прокачаться из начинающего программиста хакером (термина «сеньор» тогда, наверное, еще не было), собрать самый крутой комп, заработать больше всех денег. При этом весь геймплей заключался в нажатии нужных кнопок действий и менеджменте немногочисленных ресурсов. Я, с теплом вспоминая такие игры, а также текстовые квесты в Космических Рейнджерах 2, решил создать игру Teamlead Simulator, в которой. ..

Читать далее

Всего голосов 46: ↑46 и ↓0 +46

Комментарии 26

Kempston

16 июл 2022 в 19:18

Время на прочтение 10 мин

Количество просмотров

9.2K

Разработка игр *Canvas *WebGL *

«Йо-хо-хо!» — невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну… если это мы, конечно же.

Возьмем шейдер неба и шейдер воды — атмосфера готова! Что может быть проще. И да, я буду писать игру под браузер на Javascript с использованием библиотек Three.js и Cannon.js. Первую я использую для отображения 3D графики, а вторую — в качестве легковесного скриптового физического движка.

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

Читать далее

Всего голосов 39: ↑39 и ↓0 +39

Комментарии 35

xcont

28 мая 2022 в 01:42

Время на прочтение 7 мин

Количество просмотров

6.1K

Ненормальное программирование *JavaScript *Алгоритмы *Canvas *Математика *

Продолжим тему бильярдных фракталов.

В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.

Читать дальше →

Всего голосов 37: ↑36 и ↓1 +35

Комментарии 15

business-incubat0r

000Z» title=»2022-03-27, 10:44″>27 мар 2022 в 10:44

Время на прочтение 6 мин

Количество просмотров

4.3K

Canvas *Управление разработкой *Управление проектами *Управление продуктом *Data Engineering *

Recovery mode

Из песочницы

Тот, кто не готов внедрять новые решения, достаточно скептично относится к такой формулировке как Low Cost Engineering, считая, что создание прототипа – это огромные затраты. Опытные же инженеры все чаще используют данную концепцию как один из инструментов бережливого производства.

Читать далее

Всего голосов 10: ↑6 и ↓4 +2

Комментарии 4

antipinIvan

16 мар 2022 в 15:50

Время на прочтение 9 мин

Количество просмотров

11K

Блог компании AGIMA Canvas *Управление разработкой *Карьера в IT-индустрии IT-компании

Привет! Я Иван Антипин, заместитель директора департамента разработки в AGIMA. За свою карьеру я поработал с десятками команд. Где-то был разработчиком, где-то тимлидом, где-то помогал извне. У меня был миллион возможностей разобраться, как люди ведут себя в коллективе. Но всё же не на все вопросы существуют четкие ответы: что такое команда, как она работает, как ей управлять. В этой статье я попробую описать те методы и подходы, которые лично мне кажутся полезными и правильными.

Читать далее

Всего голосов 27: ↑22 и ↓5 +17

Комментарии 14

eyudinkov

7 фев 2022 в 16:41

Время на прочтение 4 мин

Количество просмотров

7.3K

JavaScript *Canvas *

Привет! Сегодня я хотел бы начать цикл статей на тему того, как работать с canvas в HTML5 и как применять знания в области матанализа для реализации необычных и интересных эффектов.

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

Сегодня мы рассмотрим, как рисовать различные фигуры, и реализуем алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis.

Читать далее

Всего голосов 5: ↑5 и ↓0 +5

Комментарии 0

DKozachenko

6 фев 2022 в 10:26

Время на прочтение 6 мин

Количество просмотров

8.6K

Canvas *Angular *TypeScript *

Из песочницы

Перевод

Создание и использование интерфейсов в TypeScript. Примеры создания и использования гибких и расширяемых интерфейсов.

Читать далее

Всего голосов 4: ↑2 и ↓2 0

Комментарии 5

resintegra

31 янв 2022 в 18:32

Время на прочтение 3 мин

Количество просмотров

1. 4K

Разработка веб-сайтов *Canvas *Angular *

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

По умолчанию версия Angular 12 не включает линтеры, потому что стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).

Читать далее

Рейтинг 0

Комментарии 0

resintegra

30 янв 2022 в 20:08

Время на прочтение 20 мин

Количество просмотров

1.9K

Разработка веб-сайтов *Canvas *Angular *

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

Читать далее

Рейтинг 0

Комментарии 5

resintegra

24 янв 2022 в 12:51

Время на прочтение 9 мин

Количество просмотров

2.2K

Разработка веб-сайтов *Canvas *Angular *

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

Это моя первая статья подобного рода и возможно я бы никогда ее не разместил, но моё лузерство и привычка быть обыкновенным, меня настолько раскрепостили, что я воспринимаю поражения как должное. Амбиций нет, есть только кайф от того, что я делаю, люблю созерцать, люблю что то создавать. Рад буду если это кому то принесет пользу. Надеюсь при просмотре опытными разработчиками все не окажется очень плохо и я найду в себе силы выложить следующие части.

А может кому то просто понравится рисовать, ссылка на демо ниже.

В этой части я буду использовать Angular, CSS фреймворк от  w3schools

Итак, в первой части будет описан процесс создания вот такой мастерской.

Читать далее

Всего голосов 4: ↑2 и ↓2 0

Комментарии 0

epodivilov

21 янв 2022 в 14:37

Время на прочтение 6 мин

Количество просмотров

8.2K

Блог компании TINKOFF CSS *JavaScript *HTML *Canvas *

Из песочницы

Меня зовут Евгений Подивилов, я фронтенд-разработчик в команде «Лайфстайл». Я разрабатываю раздел «Развлечения». В этом разделе можно купить билеты на мероприятия или забронировать столик в ресторане.

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

Иногда спиннер вместо того, чтобы успокоить пользователя, тормозит и забирает больше ресурсов, чем сама задача. Про один такой индикатор я и расскажу.

Читать далее

Всего голосов 32: ↑32 и ↓0 +32

Комментарии 16

Enfriz

1 дек 2021 в 10:30

Время на прочтение 16 мин

Количество просмотров

20K

JavaScript *Программирование *Алгоритмы *Canvas *TypeScript *

✏️ Технотекст 2021

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

Читать далее

Всего голосов 127: ↑127 и ↓0 +127

Комментарии 33

honyaki

12 окт 2021 в 15:45

Время на прочтение 8 мин

Количество просмотров

10K

Блог компании SkillFactory Разработка веб-сайтов *CSS *JavaScript *Canvas *

Туториал

Перевод

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией. Делимся материалом, пока у нас начинается курс по Frontend-разработке.

Читать далее

Всего голосов 16: ↑15 и ↓1 +14

Комментарии 4

jamak

000Z» title=»2021-10-01, 10:30″>1 окт 2021 в 10:30

Время на прочтение 5 мин

Количество просмотров

5.3K

Разработка веб-сайтов *HTML *Canvas *Angular *

Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.

Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.

Читать далее

Всего голосов 12: ↑12 и ↓0 +12

Комментарии 3

Canvas (базовая поддержка) | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Холст (базовая опора)

— ЛС

• Глобальное использование

  98,15% + 1,02% «=» 99,17%

Метод создания быстрой динамической графики с использованием JavaScript.

Хром

1. 4 — 109: Supported
2. 110: Supported
3. 111 — 113: Supported

Edge

1. 12 — 109: Supported
2. 24% — Supported»> 110: Supported

Safari

1. 3.1 — 3.2: Partial support
2. 4 — 16,2: Поддерживается
3. 16,3: Поддерживается
4. 16,4 — TP: Поддерживается

Firefox

1. 2 — 3,5: частичная поддержка
2. 3,6 — 109: Поддержка.0058 111 — 112: поддержан

Opera

1. 9 — 94: Поддерживается
2. 95: Поддерживается

IE

1. 5.5: не поддерживается
2. 6: не поддерживает (но не поддержал (но не поддержал (но не поддержал, но не поддерживает
, но не поддерживает, но не поддерживает. 9 — 10: поддержано
3. 11: Поддерживается

Chrome для Android

1. 110: Поддерживается

Safari на IOS

1. 3.2 — 16,2: поддержал
2. 16.3: Поддержание
888 888 888 888 888 888 888 888 888 888 888 888 8. 28 8. 28 8. 28 8. 2 8. 2
3. .0015

Samsung Internet

1. 4 — 19.0: Supported
2. 20: Supported

Opera Mini

1. all: Partial support

Opera Mobile

1. 10 — 12.1: Supported
2. 73: Supported

Браузер UC для Android

1. 90% — Supported»> 13.4: Поддерживается

Браузер Android

1. 2.1–2.3: Частичная поддержка
2. 3–4.4.4: Поддерживается
9004: Поддерживается 9004:0015

Firefox for Android

1. 110: Supported

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Supported

KaiOS Browser

1. 2.5: Supported
2. 3: Supported

Для программ чтения с экрана IE, Chrome и Firefox поддерживают вложенный DOM доступного элемента холста. Firefox и Chrome также поддерживают кольцо DrawFocus.

Ресурсов:

Animation Kit

MDN Web Docs — Canvas API

Учебник по Mozilla

. Другой учебник

для интернет -исследователя

HAS. Текстовый API для Canvas

WebGL — трехмерная графика Canvas

Режимы наложения Canvas

WebGL 2.0

Path3D

Начало работы с Canvas в HTML5 | Мэт Суэйнсон

Canvas в HTML5 — это мощный инструмент для создания интерактивных дисплеев, графики и многого другого.

Вот пример того, как начать строить с помощью Canvas в HTML5, с помощью простого учебника по частицам. Это охватывает базовый цикл анимации, рисование на холсте и реакцию на действия пользователя.

Чтобы обойти самые основы взаимодействия с холстом, мы собираемся написать код JavaScript для добавления «частиц» на холст в зависимости от положения пальца, мыши или указателя пользователя.

Сначала нам нужна простая «скелетная» разметка для нашего CSS, HTML и JavaScript.

Приведенный выше CSS устанавливает фиолетовый цвет фона страницы и удаляет все поля и отступы вокруг холста. JavaScript устанавливает простую основу для нашего кода Particles.

Отсюда нам нужно установить несколько глобальных переменных, ссылающихся на сам холст, которые потребуются во всем коде.

c выбирает холст из DOM, а ctx создает доступ к своему 2D-контексту. кадров в секунду ( кадров в секунду ) — это количество раз, которое мы хотели бы обновить холст в секунду.

Нам также нужны еще две переменные, указатель и частицы :

объект: указатель Для установки координат x и y мыши пользователя во время выполнения. А пока давайте установим значения в центр дисплея.

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

С добавлением этих двух переменных у нас есть все строительные блоки, чтобы двигаться дальше и начать писать код для взаимодействия с холстом.

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

Чтобы наша система частиц отображалась в полноэкранном режиме, нам нужно установить размер нашего холста на setCanvasSize во время выполнения, а также прикрепить функцию к окну ориентацию изменить и изменить размер событий. Делая это, мы можем обновить высоту и ширину нашего холста с новым размером экрана в моменты запуска этих событий.

Чтобы отслеживать указатель пользователя, мы можем использовать setPointerPostion, чтобы обновлять позицию нашего указателя всякий раз, когда запускаются события mousemove или touch .

Давайте добавим прослушиватели событий для setCanvasSize и setPointerPostion в нашу функцию init() .

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

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

Мы запускаем цикл, запуская функцию requestFrame , запрашивающую у браузера выполнение функции Draw перед следующей перерисовкой окна.

В функции Draw мы вызываем window.setTimeout для повторного запуска requestFrame в зависимости от того, сколько раз в секунду должен выполняться этот цикл.

Каждый раз, когда Draw вызывается в нашем цикле анимации, мы можем рисовать наши частицы в различных положениях на холсте. На данный момент в приведенном выше коде мы просто очищаем холст с помощью метод clearRect в каждом кадре.

Чтобы запустить цикл во время выполнения, как и в случае с нашими прослушивателями событий ранее, нам нужно вызвать requestFrame() из нашей функции init() .

Теперь мы готовы работать над рисованием частиц на холсте в каждом кадре цикла анимации. На данный момент на экране у нас все еще есть следующее:

Каждая частица имеет различные атрибуты, которые нам нужно сохранить — это цвет, положение, размер и скорость. Эти значения можно менять в каждом кадре анимации, чтобы перемещать частицу по холсту.

Чтобы сделать вещи простыми и многоразовыми, давайте создадим объект Particle . Затем на каждый кадр анимации мы добавляем по одной частице .

Позиции x и y каждой частицы основаны на положении указателя в этот момент, но для его скорости нам нужна вспомогательная функция getRandomInt , которая будет возвращать случайное число от -10 до 10.

Теперь что массив частиц заполняется, пора добавить цикл for, перебирающий содержимое частиц и прорисовка каждой на холсте.

Нарисовать новую форму или частицу на холсте можно разными способами. Выше мы используем контекст beginPath , arc и fill .

Хорошее начало, но было бы лучше, если бы наши частицы двигались.