为什么box-sizing不能与canvas元素上的width/height属性一起使用? [英] Why box-sizing is not working with width/height attribute on canvas element?
问题描述
让我们考虑以下代码:
.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?
经过一番搜索，我发现应该避免在画布上使用width/height属性，因为它会缩放画布并且不会像我们想象的那样调整其大小.
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做同样的操作，因为它们面临相同的收缩效果.
This somehow explain why the browser is ignoring box-sizing in order to avoid the shrink effect but it still remain counter-intuitive as it may lead to other unwanted issues outside the canvas. If this was the reason, then the broswer should also do the same with img because they face the same shrink effect.
那么，为什么会这样呢?为什么浏览器决定忽略box-sizing而不是缩小画布?
So again, why such behavior? Why the browser decide to ignore the box-sizing instead of shrinking the canvas?
最重要的问题:在哪里定义了这种行为?
我找不到规范的哪一部分正在处理此问题.
I am not able to find which part of the specification is dealing with this.
