object-fit 如何与 canvas 元素配合使用？

Question

我一直无法找到任何文件来告诉我一种或另一种方式。

我可以在画布元素上使用适合对象的封面吗？我做了一些实验，但它没有按预期运行。

有人能给我一个明确的答案吗？

Answer 1

object-fit¹将仅产生作用时，有一个比率变化（畸变），并适用于仅更换元件（canvas是一个替换元件）

这是一个基本示例：

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 之间的区别的相关问题：Why box-sizing is not working with width/height attribute on canvas element?

¹从规范中我们可以清楚地看到所有值（除了默认值fill）都将尝试保持比率：

包含

被替换的内容被调整大小以保持其纵横比，同时适合元素的内容框：它的具体对象大小被解析为对元素使用的宽度和高度的包含约束。

覆盖

在填充元素的整个内容框时，替换内容的大小会保持其纵横比：它的具体对象大小被解析为对元素使用的宽度和高度的覆盖约束。

没有任何

替换的内容不会调整大小以适应元素的内容框：使用没有指定大小的默认大小算法确定对象的具体对象大小，并且默认对象大小等于替换元素的使用宽度和高度。

该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: contains; 在布局中保持原始图像宽度