对象适合如何与画布元素一起使用？答案

【问题标题】：How does object-fit work with canvas element?对象适合如何与画布元素一起使用？
【发布时间】：2019-07-18 21:40:36
【问题描述】：

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

我可以在画布元素上使用适合对象的封面吗？我已经做了一些实验，但它的表现并不像预期的那样。

谁能给我一个明确的答案？

【问题讨论】：

标签： css html html5-canvas object-fit

【解决方案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?

¹从the specification我们可以清楚地看到所有的值（除了默认的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>

【讨论】：