Как создать холст, который хорошо масштабируется с изменением размера окна браузера - PullRequest
Новая
       8

Как создать холст, который хорошо масштабируется с изменением размера окна браузера

0 голосов
/ 19 ноября 2018

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

Кажется, что центр холста находится внизу страницы, как будто холст простирается за пределы экрана

холст, когда ширина установлена ​​на 100% или 100vmax

Холст, когда ширина задается с помощью javaScript, НЕ ОТВЕТСТВЕННЫЙ

1 Ответ

0 голосов
/ 19 ноября 2018

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

Пример:

Допустим, у меня есть Canvas с размерами 864 x 576, и я хочу, чтобы он реагировал на все тело.

Найти процент / отношение canvas. Для этого вы можете сделать это вручную или через JavaScript. В этом примере давайте сделаем это вручную для неизменяемого изображения.

соотношение = ширина / высота * 100

Таким образом, здесь наше соотношение будет ratio = 864 / 576 * 100, что будет 150% (как в 1,5: 1 или 3: 2)

Теперь мы добавим стили, используя высоту области просмотра vh. 

canvas
{
  display: block;
  margin: auto;
  width: 150vh;
  height: 100vh;
}

Теперь остается одна проблема. Что если ширина окна меньше, чем у холста? Хорошо, мы создаем медиа-запрос CSS и делаем противоположное тому, что мы сделали.

коэффициент = (высота / ширина) * 100

Так что здесь наше соотношение теперь будет ratio = 576 / 864 * 100, что будет 66,66% (как в 0,66: 1 или 7:10)

Теперь нам нужно использовать ширину области просмотра для canvas ширины и высоты. ширина всегда 100vh. 

@media (max-width: 150vh)
{
  canvas
  {
    width: 100vw;
    height: 66.66vw;
  }
}

Медиа-запрос max-width должен быть равен ширине холста, которая в этом примере равна 150vh.

Взгляните на код: https://codepen.io/StudioKonKon/pen/oQobaa

var image = "https://res.cloudinary.com/studiokonkon/image/upload/v1541450918/sample.jpg";

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 864;
canvas.height = 576;


var background = new Image();
background.src = image;

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function()
{
    ctx.drawImage(background,0,0);   
}
body { margin: 0; padding: 0; background: #000; }

.mycanvas
{
  display: block;
  margin: auto;
  width: 150vh;
  height: 100vh;
}

@media (max-width: 150vh)
{
  .mycanvas
  {
    width: 100vw;
    height: 66.66vw;
  }
}
<canvas id="canvas" class="mycanvas"></canvas>

Обратите внимание, что поддержка модулей vh и vw поддерживается только в последних браузерах и при условии, что вам не нужен Internet Explorer.

https://caniuse.com/#feat=viewport-units

...