Как стать автором
Обновить
1.6
Рейтинг

Canvas *

Элемент HTML5

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Блюр объектов в реальном времени на видео с помощью canvas

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

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

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

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 2.8K
Комментарии 19

Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

JavaScript *HTML *Canvas *
Из песочницы

Ссылка на GitHub

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

Читать
Всего голосов 9: ↑9 и ↓0 +9
Просмотры 4K
Комментарии 2

Как мы боролись за байты на фронтенде. Усмиряем прожорливый виджет рисования и помогаем iPad его переварить

Блог компании Miro JavaScript *Клиентская оптимизация *Canvas *
Из песочницы

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

Так случилось и с нашим продуктом: 2020 год стал для Miro годом оптимизации производительности. Чем больше пользователей взаимодействуют на одной доске, тем больше контента генерируется, тем больше данных браузеру каждого пользователя нужно получить, обработать и отобразить в реальном времени.

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 3.9K
Комментарии 11

Будущее веба: станет ли рендеринг в <canvas> заменой DOM?

Блог компании 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
Просмотры 20K
Комментарии 100

Карта метро Москвы с расчётом пути

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

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Просмотры 6.5K
Комментарии 14

Варианты создания интерактивной экскурсии для пользователей

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

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

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

Читать далее
Всего голосов 50: ↑50 и ↓0 +50
Просмотры 1.7K
Комментарии 0

Есть ли жизнь после жизни?

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

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

Читать далее
Всего голосов 85: ↑84 и ↓1 +83
Просмотры 31K
Комментарии 42

Шейдеры, Three.js и киберпанк. Как мы делали лендинг в неоново-античной стилистике

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

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

Читать далее
Всего голосов 13: ↑11 и ↓2 +9
Просмотры 15K
Комментарии 11

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

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

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

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

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 4.1K
Комментарии 2

Конфетти на канвасе

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

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

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Просмотры 1.6K
Комментарии 0

Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации

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

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

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

Читать далее
Всего голосов 54: ↑54 и ↓0 +54
Просмотры 13K
Комментарии 30

Опыт использования транслятора OberonJS для создания редактора интерактивных моделей

Open source *JavaScript *HTML *Canvas *Инфографика
Из песочницы

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

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 1.6K
Комментарии 27

Индикатор искусственного горизонта на HTML5 canvas

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



Назначение и область применения искусственного горизонта


Искусственный горизонт в рассматриваемом здесь узком смысле представляет собой визуализацию наклона объекта относительно местной вертикали, используемую для управления его движением. Наклон определяется значениями двух углов Эйлера, крена и тангажа. Авиационному термину «тангаж» моряки предпочитают синоним «дифферент».
Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 2.7K
Комментарии 3

Визуализация изменения климата при помощи интерактивного генеративного искусства

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

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

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

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 1.4K
Комментарии 0

Canvas и геометрия. Это почти просто

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

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


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

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


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

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


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

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

Читать дальше →
Всего голосов 6: ↑2 и ↓4 -2
Просмотры 2.8K
Комментарии 5

Как мы разработали интерактивную веб-схему для зрительных залов

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

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

Читать дальше →
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 2.7K
Комментарии 4

PIXI.js создание кликера

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

image
Читать дальше →
Всего голосов 4: ↑2 и ↓2 0
Просмотры 10K
Комментарии 0

Ускорение вывода диаграмм с использованием OffscreenCanvas

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



Статья, перевод которой мы сегодня публикуем, посвящена использованию интерфейса OffscreenCanvas. Здесь речь пойдёт о том, зачем может понадобиться этот интерфейс, о том, чего реально ожидать от его применения, и о том, какие сложности могут возникнуть при работе с ним.
Читать дальше →
Всего голосов 37: ↑37 и ↓0 +37
Просмотры 2.9K
Комментарии 0

Персональный Лас-Вегас, или игра в браузерном расширении

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

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

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

Prerender on canvas 2D

JavaScript *Canvas *
Tutorial

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


hero image


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


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

Читать дальше →
Всего голосов 15: ↑12 и ↓3 +9
Просмотры 2.5K
Комментарии 6

Вклад авторов