Есть ли способ сделать canvas адаптивным?

Question

[Алексей Струков]

Приветствую всех!
Кто имеет опыт работы с canvas, подскажите плиз, можно ли сделать его адаптивным?
Есть например холст размером 500 на 500 пикселей. На нем допустим есть 10 кругов с диаметром 100 пикселей, которые хаотично плавают по холсту. Надо сделать так, чтобы при уменьшении экрана, круги тоже пропорционально или адаптивно уменьшались.
Какие могут быть варианты?

Comments

[zekohina]

Получать текущие размеры экрана и перерисовывать пропорционально?

Answer 1

[Сергей Сунцев]

Задай переменную в которую отправляй ширину экрана, и от этого пропорционально уменьшай элементы.

Comments

[Алексей Струков]

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

[zekohina]

Алексей Струков: Ну а хуле ты хотел) Адаптивность просто так не дается.

[Сергей Сунцев]

Да этот способ должен решить проблему с переворачиванием экрана телефона, я обычно этой чтукой пользуюсь. jquery.page2page.ru/index.php5/%D0%9E%D0%B1%D1%80%...

[Алексей Струков]

Сергей Сунцев: ок спс. а какие библиотеки нормальные порекомендуешь для работы с графикой? а то канвас на чистом js слишком низкоуровневый по моему )

[Златослав Десятников]

Алексей Струков, могу подсказать для SVG. snapsvg.io

[Сергей Сунцев]

Алексей Струков: Я konva.js пользуюсь если хорошо знаешь ООП, то должна понравится.

Answer 2

[xmoonlight]

В общем виде - как-то так:

Comments

[dicem]

В чем прикол? Анимашку прислал и рад >