问题描述

让我们考虑一下这段代码:

Let's consider this code:

.canvas {
  width:150px;
  height:150px;
}
canvas {
  box-sizing:border-box;
  border:5px solid;
}

<canvas height="150" width="150"></canvas>
<canvas class="canvas"></canvas>

我们定义了两个 canvas，它们具有相同的宽度/高度、相同的边框和 box-sizing:border-box.我们可以清楚地看到，我们使用 CSS 属性的画布尊重 box-sizing (边框从宽度/高度减小)但第一个使用属性定义的画布忽略了 box-sizing(边框添加到宽度/高度).

We have two canvas defined with the same width/height, same border and box-sizing:border-box. We can clearly see that the canvas where we used CSS properties is respecting the box-sizing (borders are reduced from the width/height) but the first one defined with attribute is ignoring box-sizing (borders are added to width/height).

我最初认为这与属性的使用有关，但在使用 img 或 iframe 时，它似乎不像预期的那样工作.

I first thought it has to do with the use of attribute but it seems not as it works as intended when using img or iframe.

.canvas {
  width:150px;
  height:150px;
}
iframe,img {
  box-sizing:border-box;
  border:5px solid;
}

<iframe height="150" width="150"></iframe>
<iframe class="canvas"></iframe>

<img height="150" width="150" src="https://picsum.photos/200/300?image=1069">
<img class="canvas" src="https://picsum.photos/200/300?image=1069">

为什么 canvas 元素会出现这种行为?

Why such behavior with canvas element?

经过一番搜索，我发现应该避免在画布上使用宽度/高度属性，因为它会缩放画布并且不会像我们想象的那样调整它的大小.

After some search, I found that using width/height properties with canvas should be avoided as it will scale the canvas and will not resize it like we may think.

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);

canvas {
  width: 150px;
  height: 150px;
  border:1px solid red;
}

<canvas ></canvas>

直观地说，上面的代码应该生成一个 150x150 正方形，但我们以一个矩形结束！这是因为画布最初是 300x150(默认尺寸)，而我们的正方形是在里面绘制的.然后我们像处理图像一样缩放整个思维，得到了不想要的结果.

Intuitively, the above code should produce a 150x150 square but we ended with a rectangle! This is because the canvas was initially 300x150 (default dimension) and our square was drawn inside. Then we scaled the whole think like we do with an image and we obtain the unwanted result.

但是，使用属性将创建所需的结果:

However, using attribute will create the needed result:

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);

canvas {
  border:1px solid red;
}

<canvas height="150" width="150"></canvas>

这以某种方式解释了为什么浏览器忽略 box-sizing 以避免缩小效果，但它仍然违反直觉，因为它可能导致 canvas<之外的其他不需要的问题/代码>.如果是这个原因，那么浏览器也应该对 img 做同样的事情，因为它们面临同样的收缩效果.