Как убедиться, что холст содержится в окне просмотра

Question

Как убедиться, что холст содержится в окне просмотра

1

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

MCVE

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width;
let h = canvas.height;

ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();

* {
  background-color: white;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

div#canvasDiv {}

canvas#canvas {
  display: block;
  margin: auto;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
    <div id="canvasDiv">
      <canvas id="canvas" width="500" height="500" />
    </div>
  </body>

</html>

Все здесь, в jsfiddle

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

Изменение размера ширины с соответствующим масштабированием

Изменение размера высоты с нежелательным переполнением

piRSquared 04 окт. 2018, в 18:30

Источник

Теги:

javascript

css

html5

canvas

1 ответ

Ещё вопросы

enxaneta · Accepted Answer · 2018-10-04T15-22-00.000Z

Вы можете прочитать эту статью: [Центрирование в CSS: полное руководство] (https://css-tricks.com/centering-css-complete-guide/

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width;
let h = canvas.height;

ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();

* {
  background-color: white;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


canvas#canvas {
  display: block;
  margin: auto;
  position:absolute;
  top:0;bottom:0;
  left:0;
  right:0;
  
}

   <div id="canvasDiv">
      <canvas id="canvas" width="500" height="500"/>
    </div>