Как стать автором
Обновить
16.75

Canvas *

Элемент HTML5

Сначала показывать
Порог рейтинга
Уровень сложности

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

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


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

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

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

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров11K

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

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

Читать далее

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

Время на прочтение6 мин
Количество просмотров4.1K

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

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

Читать далее

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

Время на прочтение4 мин
Количество просмотров33K

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

Читать далее

Истории

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

Время на прочтение6 мин
Количество просмотров20K

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

Читать далее

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

Время на прочтение9 мин
Количество просмотров9.3K

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

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

Читать далее

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

Время на прочтение3 мин
Количество просмотров2.9K

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

Читать далее

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

Время на прочтение6 мин
Количество просмотров25K

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

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

Читать далее

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

Время на прочтение6 мин
Количество просмотров2.4K

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

Читать далее

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

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



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


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

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

Время на прочтение7 мин
Количество просмотров2.1K

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

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

Читать далее

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

Время на прочтение6 мин
Количество просмотров6.6K

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


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

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


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

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


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

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

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

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

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

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

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

Ближайшие события

25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань
20 – 22 июня
Летняя айти-тусовка Summer Merge
Ульяновская область

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

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

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

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

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



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

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

Время на прочтение10 мин
Количество просмотров2.7K

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

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

Prerender on canvas 2D

Время на прочтение2 мин
Количество просмотров3.3K

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


hero image


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


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

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

Leaflet. Дружим Image с Canvas

Время на прочтение4 мин
Количество просмотров11K
Leaflet Map

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

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

SVG или canvas?

Время на прочтение7 мин
Количество просмотров32K


SVG и canvas — это технологии, которые можно использовать для рисования чего-либо на веб-страницах. Поэтому их стоит сравнить и разобраться в том, когда стоит применять SVG, а когда — canvas. Даже весьма поверхностное понимание сути этих технологий позволяет сделать вполне осознанный выбор. Собственно говоря, вот — две типичных ситуации, в одной из которых стоит предпочесть SVG, а в другой — canvas:

  • Нужно нарисовать небольшую иконку? Это, безусловно, территория SVG.
  • Нужно создать интерактивную браузерную игру? Тут, определённо, нужна технология canvas.

Автор статьи, перевод которой мы сегодня публикуем, говорит, что знает о том, что пока не раскрыл причины такого выбора. Но он надеется, что эти причины станут совершенно очевидными после того, как он поделится некоторыми подробностями об SVG и canvas.
Читать дальше →

Новая игра со старой атмосферой на Three.js. Часть 2

Время на прочтение20 мин
Количество просмотров12K
В первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я бы хотел подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.


Схемы уровней


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

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