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设置widthheight的区别。为什么在canvas元素上使用widthheight属性时，方框大小无法使用？

---

¹来自 规格 我们可以清楚地读出，所有的值（预计默认值为 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对象-fit：包含；是在布局中保持原始图片宽度。