我无法找到任何文档来告诉我如何操作。我可以在画布元素上使用 object-fit cover 吗？我做了一些实验，但结果并不像预期的那样...
我无法找到任何文献来告诉我这一点或那一点。
我可以在画布元素上使用 object-fit cover 吗？我做了一些实验，但效果不如预期。
有人能给我一个明确的答案吗？
很好的答案。只是想知道：封闭的目的是什么
object-fit 1仅 在比例发生变化（扭曲）时 才会 被替换的 元素（ 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 设置宽度/高度之间的区别相关的一个问题： 为什么 box-sizing 不能与 canvas 元素上的宽度/高度属性一起使用？
1从 规范 我们可以清楚地看到，所有值（默认值除外 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>