对象适合度如何与canvas元素一起工作? [英] How does object-fit work with canvas element?

问题描述

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

I have been unable to find any documentation to tell me one way or another.

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

Am I able to use object-fit cover on a canvas elements? I have done some experimenting and it is not behaving as expected.

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

Can somebody give me a definitive answer?

推荐答案

object-fit ¹ 仅在比率变化(失真)时有效.并且仅适用于已替换元素(canvas是已替换元素)

object-fit¹ will only have an effect when there is a ratio change (a distortion) and applies to only replaced element (canvas is a replaced element)

这是一个基本示例:

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将对此进行纠正.

As you can see I defined a height/width for the canvas to be 200x200 (1:1 ratio) then I change this using CSS thus I break the ratio (we no more have a square) then object-fit will correct this.

一个相关的问题，以了解使用属性设置宽度和高度与使用CSS设置之间的区别:为什么盒装尺寸不能使用宽度/height属性在画布元素上?

A related question to understand the difference between setting width/height using attribute and using CSS: Why box-sizing is not working with width/height attribute on canvas element?

¹ 来自规范我们可以清楚地看到所有值(默认为fill)将尝试保持该比率:

¹From the specification we can clearly read that all the values (expect the default one fill) will try to maintain the ratio:

包含

替换后的内容的大小以保持其长宽比，同时适合元素的内容框:将其具体对象的大小解析为对元素使用的宽度和高度的包含约束.

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.

封面

替换后的内容的大小可保持其宽高比，同时填充元素的整个内容框:将其具体对象的大小解析为对元素使用的宽度和高度的覆盖约束.

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.

无

替换后的内容不会调整大小以适合元素的内容框:使用默认的大小调整算法(没有指定大小)和默认的对象大小等于替换的元素使用的宽度和高度来确定对象的具体对象大小.

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

The none value is a bit tricky but it basically mean keep the intrinsic default image size without scaling like contain or 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对象适合:包含；在布局中保持原始图像宽度

这篇关于对象适合度如何与canvas元素一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！