javascript - Canvas 上下文的大小不正确

Question

我有两个 Canvas block ，一个使用内联属性调整大小，另一个使用 CSS 调整大小。

HTML:

<canvas id="canv_in" width="400" height="400"> </canvas>
<canvas id="canv_ss"> </canvas>

CSS:

canvas {
     background-color : rgba(200, 200, 200, 0.5);
}

#canv_ss {
    width : 400px;
    height: 400px;        
}

两个 Canvas 具有相同的尺寸，但是当我尝试在两个 Canvas 中绘制相同的矩形时，我得到了不同的结果。这是 js:

var canvasElems = document.getElementsByTagName("canvas");
var canvasContext;

for(i = 0; i < canvasElems.length; ++i) {
    canvasContext = canvasElems[i].getContext("2d");
    canvasContext.fillStyle = "rgba(0, 0, 225, 1.0)";
    canvasContext.fillRect(120, 10, 150, 150);
}

结果如下:

所以，我的问题是:我们如何按预期调整矩形的大小，同时将我的元素样式保留在 CSS 中？那不可能吗？为什么右侧的矩形行为异常？

Answer 1

宽度属性默认为 300px，高度为 150px。向元素添加样式表只会将框缩放到该大小，不会扩展坐标空间。

A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.

Canvas 元素表示嵌入内容时的固有尺寸等于元素位图的尺寸。

HTML 属性(width 和 height)设置 Canvas 尺寸，这决定了对象在 Canvas 上的测量方式。

CSS 样式设置 Canvas 显示大小，它决定了 Canvas 在浏览器上的尺寸。如果显示尺寸与尺寸不同， Canvas 将在绘制时被拉伸(stretch)。

当 canvas 元素表示嵌入的内容时，它提供一个绘制源，其宽度是元素的固有 width，height 是元素的固有高度，外观是元素的位图。

每当 width 和 height 内容属性被设置、删除、更改或冗余设置为它们已有的值时，如果 Canvas 上下文模式为 direct-2d，用户代理必须将位图尺寸设置为宽度和高度内容属性的数值。

width 和 height IDL 属性必须反射(reflect)具有相同默认值的相同名称的相应内容属性。

结论

Canvas 尺寸和 Canvas 显示尺寸之间存在差异。

如果您只定义尺寸，它也将用作显示尺寸，即 Canvas 以 1:1 的比例绘制。

如果您只定义显示尺寸，尺寸将获得默认值 300 乘以 150。

You have more information here.