object-fit 如何与 canvas 元素一起使用？

Question

我一直无法找到任何文档来告诉我这种或那种方式。

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

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

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>

如您所见，我将 canvas 的 height/width 定义为 200x200（1:1 比率），然后我使用 CSS 更改了它，因此我中断了比率（我们不再有正方形）然后 object-fit 将更正此。

了解设置 width/height 使用属性和使用 CSS 之间区别的相关问题：

¹从the specification我们可以清楚地看到所有的值（除了默认值fill）都会尽量保持比率：

contain

The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.

cover

The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

none

The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.

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>

object-fit 如何与 canvas 元素一起使用？

How does object-fit work with canvas element?

html

css

html5-canvas

object-fit