Question

我一直找不到任何可以告诉我的文件。

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

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

Answer 1

正如我在this answer中所解释的，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: 200px;
  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更改了高度/宽度，因此我打破了比率（我们不再有正方形），然后{ {1}}将纠正此问题。

一个相关的问题，用于了解使用属性和CSS设置宽度/高度之间的区别：Why box-sizing is not working with width/height attribute on canvas element?

画布元素上的对象拟合

1 个答案: