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

Canvas™ *

Элемент HTML5

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

Low Cost Engineering как метод бережливого производства в технологическом стартапе

Canvas™ *Управление разработкой *Управление проектами *Управление продуктом *Data Engineering *
Recovery mode
Из песочницы

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

Читать™ далее
Всего голосов 10: ↑6 и ↓4 +2
Просмотры 3.8K
Комментарии 4

Новости

Как управлять командой разработки

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

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

Читать™ далее
Всего голосов 27: ↑22 и ↓5 +17
Просмотры 7.4K
Комментарии 14

Основные приемы™ работы™ с Canvas™ [Part 1]

JavaScript *Canvas™ *

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

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

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

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

Создание гибких™ TypeScript интерфейсов

Canvas™ *Angular *TypeScript *
Из песочницы
Перевод

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

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

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2.1 (ESLint™)

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

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

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

Читать™ далее
Рейтинг 0
Просмотры 833
Комментарии 0

Создаем приложение Art-pixel на Angular и Nest.js. Часть 2

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

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

Читать™ далее
Рейтинг 0
Просмотры 1.5K
Комментарии 5

Создаем приложение Art-pixel на Angular и Nest.js. Часть 1

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

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

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

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

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

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

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

7 + 1 способ™ анимировать спиннер

Блог компании TINKOFF CSS *JavaScript *HTML *Canvas™ *
Из песочницы

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

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

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

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

Процедурная генерация бумажных снежинок

JavaScript *Программирование *Алгоритмы *Canvas™ *TypeScript *
✏️ Технотекст 2021

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

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

Как написать собственное свойство CSS

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

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

Читать™ далее
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 9.9K
Комментарии 4

Как писать™ на HTML Canvas™ удобно™, или как изобрести очередной renderer на Angular

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

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

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

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

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

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

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

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

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

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

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

Ссылка™ на GitHub™

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

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

Будущее веба: станет™ ли рендеринг в <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
Просмотры 22K
Комментарии 100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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