Подгонка объекта под холст

Question

Мне не удалось найти какую-либо документацию, которая бы так или иначе говорила мне.

Могу ли я использовать объектно-подобранное покрытие на элементах canvas?Я провел некоторые эксперименты, и они не ведут себя должным образом.

Может кто-нибудь дать мне окончательный ответ?

Answer 1

object-fit ¹ будет только работать при изменении отношения для его корректировки.

Вот базовый пример:

var canvas = document.querySelectorAll("canvas");
for (var i = 0; i < canvas.length; i++) {
  ctx = canvas[i].getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
}

canvas {
  width: 100px;
  height: 250px;
  border: 1px solid red;
  display: block;
}

.box {
  display: inline-block;
  border: 2px solid green
}

<div class="box">
  <canvas width="200" height="200"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div>

Как вы можете видеть, я определил высоту / ширину для холста как 200x200 (соотношение 1: 1), затем я изменяю это, используяCSS, таким образом, я нарушаю соотношение (у нас больше нет квадрата), тогда object-fit исправит это.

Связанный вопрос, чтобы понять разницу между установкой ширины / высоты с использованием атрибута и использованием CSS: Почемуbox-sizing не работает с атрибутом width / height на элементе canvas?

---

¹ Из спецификации мы можем четко прочитать, что всезначения (за исключением значения по умолчанию fill) будут пытаться поддерживать соотношение:

содержат

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

cover

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

none

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

Значение none немного сложное, ноэто в основном означает сохранение внутреннего размера изображения по умолчанию без масштабирования, например contain или cover

var canvas = document.querySelectorAll("canvas");
for (var i = 0; i < canvas.length; i++) {
  ctx = canvas[i].getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
}

.box canvas {
  border: 1px solid red;
  display: block;
  object-fit:none;
}

.box {
  display: inline-block;
  border: 2px solid green
}

<canvas width="200" height="200"></canvas>
<div class="box">
  <canvas width="200" height="200" style="width:100px;height:200px;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="height:50px;width:200px;"></canvas>
</div>

Связанный: CSS object-fit: serve;сохраняет оригинальную ширину изображения в макете