​Усмиряем прожорливый виджет рисования и помогаем iPad его переварить

Автор статьи — участник команды Canvas Widgets, которая занимается разработкой виджетов на канвасе. Он рассказал, как они оптимизировали виджет для рисования, чтобы он не ел слишком много ресурсов и не сбоил из-за этого.

Подробнее здесь:

https://tprg.ru/uo7X

#canvas

Современный аналог скринсейвера с медузами на Canvas

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

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

https://codepen.io/justjspr/pen/JMBWEV

#codepen #canvas

​Canvas2D. Canvas2D повсюду

Примерно 30-40% сайтов используют элемент <canvas> для своих целей. При этом 98% таких элементов рендерят Canvas2D. Он, кстати, применяется и в автомобилях, и в холодильниках, и даже в космосе.

О том, что он умеет сегодня, рассказали в блоге Google Chrome:

https://developer.chrome.com/blog/canvas2d/

#canvas #html

Пинг-понг на JavaScript

Нашли для вас крутую серию статей, по которой вы сможете создать пинг-понг для игры вдвоём на JavaScript. В проекте будет применять Canvas для отрисовки игрового поля и элементов игры.

Подробнее:

https://thecode.media/ping-pong/

#gamedev #canvas #javascript

OffscreenCanvas в JavaScript: разгоняем графику до максимума

OffscreenCanvas — это API, которое позволяет рендерить графику в отдельном потоке Worker, не блокируя основной поток, где обрабатывается интерфейс. Технически это достигается за счёт разделения UI и вычислений.

В этой статье вы узнаете зачем он нужен и как правильно его использовать. Уже пробовали?

#javascript #canvas #фронтенд

Как сделать анимацию разными способами

Во фронтенде существует куча способов создать анимации: HTML + CSS, Canvas, SVG, WebP, Lottie и так далее. Каждый из вариантов даёт различные преимущества.

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

#фронтенд #css #canvas

Этот снежный шар сделан с помощью Canvas. Логика прописана в JavaScript, а стили в CSS. Никаких сторонних библиотек, препроцессоров и прочего.

Можете убедиться сами, посмотрев код проекта на codepen: https://codepen.io/Calleb/pen/pvzgBpa

#codepen #canvas