Как сделать canvas во весь экран
Перейти к содержимому

Как сделать canvas во весь экран

  • автор:

Растянуть canvas элемент (имеющий размер) на весь экран

Всем привет! Есть ли возможность растянуть канвас элемент на весь экран? фишка в том, что он имеет размер и мне не хотелось бы его менять:

var canvas = document.getElementById('canvas'); var canvasWidth = 1000; var canvasHeight = 1000; var ctx = canvas.getContext('2d');
canvas

То есть, хотелось бы, чтобы вот этот размер сохранился ( 1000 на 100 пикселей), но сам он занимал как бы всю страничку, то есть был растянут.

Отслеживать
Karlos Margaritos
задан 30 янв 2021 в 17:48
Karlos Margaritos Karlos Margaritos
45 5 5 бронзовых знаков
А если на весь экран, но без потери соотношения?
12 мая 2023 в 2:27

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Указать ему размеры в CSS: 100vw — это ширина окна, 100vh — высота.

let ctx = document.getElementById("canvas").getContext("2d"); ctx.fillRect(900, 900, 100, 100); // Демо, как выглядит 100x100 квадрат в углу.
body < background-color: #169; >canvas

Если хочется оставить блок квадратным, но растянуть в размере меньшего из сторон окна, можно так:

(function() < let style = document.createElement("style"); let css = [ "#canvas < width: 100vw >", // Если ширина окна меньше высоты, "#canvas < height: 100vh >", // Если высота меньше ширины. ]; document.head.appendChild(style); update_css_size(); window.addEventListener("resize", update_css_size); function update_css_size() < let index = Number(innerWidth >innerHeight); // 0 или 1 style.textContent = css[index]; > >)(); /***/ let ctx = document.getElementById("canvas").getContext("2d"); ctx.fillRect(900, 900, 100, 100);
canvas

Отслеживать
ответ дан 30 янв 2021 в 18:14
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 49 49 бронзовых знаков

Спасибо за ответ! Возникла такая проблемка, так как (обычно) ширина экранов больше чем высота, то, находящиеся внутри канваса элементы как бы тянутся по ширине. Можно этого избежать?

30 янв 2021 в 18:28

@KarlosMargaritos О_о одно условие противоречит другому) Оно или не квадратное, растянутое на весь экран, или квадратное, но не на весь экран. Можно например потянуть только на всю высоту, или на всю ширину [ через JS взяв меньшее из двух ], оставив квадратным.

30 янв 2021 в 19:08

@KarlosMargaritos Добавил второй вариант для квадрата. Может есть что попроще, не додумался. Также можно придумать другой вариант: растянуть на весь экран, но сместить начало координат так, чтобы 1000×1000 попадало в центр. Также, считая innerWidth / innerHeight через JS. Но если в «минусовых» координатах ничего не должно рисоваться, легче залить всё, что не попадает в квадрат — тем же цветом, что и у canvas, делая вид, что это его часть.

30 янв 2021 в 19:33

Спасибо большое за примеры, буду думать, может как то поиграть со свойством scale css или отобразить только часть канваса

HTML Canvas на весь экран: сохранение функциональности

Для создания HTML-холста, который бы адаптивно занимал весь экран, задайте его width и height с помощью window.innerWidth и window.innerHeight . В CSS нужно расположить canvas так, чтобы отступов не было и он занимал весь видимый экран:

Скопировать код

const canvas = document.getElementById('myCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.onresize = () => < canvas.width = window.innerWidth; canvas.height = window.innerHeight; >;

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

Оптимизация производительности: вопрос скорости

Масштабирование HTML-холста до полного экрана может повлиять на скорость рендеринга. Для обеспечения плавности исполнения анимации и повышения производительности используйте window.requestAnimationFrame :

Скопировать код

function resizeCanvas() < canvas.width = window.innerWidth; canvas.height = window.innerHeight; >function animate() < resizeCanvas(); // Здесь следует выполнить отрисовку window.requestAnimationFrame(animate); >animate();

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

Сохранение пропорций

Для корректной работы в полноэкранном режиме необходимо учесть:

  1. Адаптировать содержимое под новые размеры экрана.
  2. Перерисовывать фигуры и изображения в правильных пропорциях.
  3. Скорректировать элементы для интерактивности или системы частиц по мере необходимости.

Применяйте эти принципы с помощью функции resizeCanvas .

Хотите полностью погрузиться в полноэкранный режим? Используем полноэкранный API

Для включения полноразмерного полноэкранного режима используйте HTML5 Fullscreen API:

Скопировать код

canvas.addEventListener('click', function() < if (canvas.requestFullscreen) < canvas.requestFullscreen(); >else if (canvas.webkitRequestFullScreen) < canvas.webkitRequestFullScreen(); >else if (canvas.mozRequestFullScreen) < canvas.mozRequestFullScreen(); >>);

Не забывайте учесть префиксы полноэкранного API для обеспечения корректной работы в различных браузерах.

Визуализация

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

До растяжения: холст сочетается с другими элементами на странице. После растяжения: холст занимает всю видимую сцену.

Используя HTML и CSS, сделайте холст адаптивным для любых размеров экрана:

Скопировать код
Скопировать код

#fullscreenCanvas

Теперь у вас на странице есть адаптивный холст, который занимает весь экран.

Как избежать проблем, связанных с полноэкранным режимом

При работе в полноэкранном режиме столкнуться можно со следующими нюансами:

  1. Плотность пикселей: учитывайте устройства с разной плотностью пикселей через window.devicePixelRatio .
  2. Особенности браузеров: не забывайте учесть специфические префиксы полноэкранных API.
  3. Выход из полноэкранного режима: обязательно предусмотрите возможность выхода, отслеживая событие fullscreenchange .
  4. Соотношение сторон: при любых изменениях размеров поддерживайте правильную форму и визуальную гармонию, чтобы исключить искажения на картинке.

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

Полезные материалы

  1. Fullscreen API — Web APIs | MDN — подробное руководство по использованию Fullscreen API.
  2. HTML Canvas Reference — справочник по тегу canvas HTML и его атрибутам.
  3. Canvas is stretched when using CSS — обсуждение создания адаптивного холста на StackOverflow.
  4. Fullscreen API Standard — официальная спецификация Fullscreen API.
  5. How to Use the HTML5 Full-Screen API — учебное руководство по реализации полноэкранного режима с помощью HTML5.
  6. Fullscreen API | Can I use. — проверка совместимости Fullscreen API с различными браузерами.

Автоматическое масштабирование элемента canvas HTML5

Для масштабирования HTML5 canvas под размер окна стоит применить обработчик события resize . Он будет динамически модифицировать свойства width и height канвы в соответствии с window.innerWidth и window.innerHeight .

Скопировать код

window.addEventListener('resize', () => < const canvas = document.getElementById('myCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; >); // Предварительно задаём размеры экрана document.getElementById('myCanvas').width = window.innerWidth; document.getElementById('myCanvas').height = window.innerHeight;

С таким кодом ваш canvas будет полноценно адаптироваться к экрану, будто блокбастер в день премьеры – готов к работе сразу после загрузки страницы и способен приспосабливаться к любым изменениям размеров экрана.

Сохраняем пропорции: держим фигуры в форме

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

Адаптивный canvas для видео игр на JavaScript

Я думаю, что все из вас давно осознали, что писать видео игры на DOM это не очень хороший вариант, поскольку взаимодействие с DOM очень сильно нагружает компьютер. Тем более, что html 5 предлагает нам замечательную альтернативу — тег canvas.

Но, наверное, когда вы начинали на нём что-то писать, вы задавались вопросом: как сделать его адаптивным? Ведь canvas при изменении ширины и высоты не растягивает свою матрицу, а значит, ваш рисунок будет занимать только его часть. Я тоже задался этим вопросом и нашёл два варианта как это сделать.

#1 full screen API

Думаю это API видели уже многие, но не все знают, что оно может растягивать на полный экран любой элемент, а не только страницу. Подробнее об этом API можно прочитать здесь developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen. Я же скажу главное: вы можете развернуть любой элемент на полный экран используя метод

Element.requestFullscreen()

Однако следует помнить, что он может быть активирован только в ответ на реакцию пользователя (клик по экрану, например). А значит, вам придётся писать что-то вроде «click anywhere to start». Выглядит не очень, согласитесь. Кроме того, если игрок нажмёт на клавишу «Esc», элемент снова свернётся. Я попытался предотвратить этот эффект, повесив обработчик событий на «Esc», но вышло не очень (точнее не вышло вообще).

Кроме того, canvas будет растянут по странице пропорционально своим размерам. Это означает, что если отношение длины и ширины экрана пользователя не совпадает с отношением длины и ширины вашего холста, появятся пустые полоски, которые выглядят очень не очень.

Ну и главное, что этот API поддерживается далеко не всеми браузерами (по крайней мере, на момент написания этой статьи).

Я думаю, что вы согласитесь — недостатков много. Поэтому представляю вашему вниманию:

#2 CanvasRenderingContext2D.scale()

Этот способ лишён всех недостатков предыдущего, поскольку поддерживается всеми браузерами, растягивает холст на весь экран и не прекращает этот режим при нажатии «Esc».

Кроме того, он очень простой. Всё, что вам нужно сделать, это:

1. В CSS указать следующие правила.

html

2. При создании холста изменить его размер следующим образом:

canvas.width = innerWidth; canvas.height = innerHeight;

3. Вызывать следующий код перед всеми функциями рисования.

ctx.scale(innerWidth / width, innerHeight / height);

Конечно, пункт 3 не нужно вызывать перед каждым рисованием чего-то на холсте. Просто укажите его перед вызовом всех функций рисования. Например так:

 let funcArr = []; const loopFunc = function() < requestAnimationFrame(loopFunc); ctx.save(); ctx.clearCanvas(); ctx.scale(innerWidth / width, innerHeight / height); for (var i = 0; i < funcsArr.length; i++) < if (funcsArr[i] !== null) < let func = animationController.funcsArr[i]; func(); >> ctx.restore(); >;

Не забудьте вызвать ctx.save() и restore().

P.S. надеюсь все уже перешли на requestAnimationFrame? Если нет, вот ссылка на документацию по этому API.

Итог

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *