Question

我有两个canvas块，一个使用内联属性调整大小，另一个使用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;        
}

画布都具有相同的尺寸，但是当我尝试在它们两个中绘制相同的矩形时，我得到了不同的结果。这是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);
}

结果如下：

Canvas is weird

所以，我的问题是：我们如何按照预期调整矩形的大小，同时在CSS中保留我的元素样式？这不可能吗？为什么右边的矩形表现得很奇怪？

Answer 1

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

画布元素可以通过样式表（其位图）任意调整大小然后服从'object-fit'CSS属性。

canvas元素表示嵌入内容时的内在尺寸等于元素位图的尺寸。

HTML属性（width和height）设置画布尺寸，用于确定如何在画布上测量对象。

CSS样式设置画布显示大小，该大小确定浏览器上画布的尺寸。如果显示尺寸与尺寸不同，则绘制时画布将被拉伸。

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

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

width和height IDL属性必须反映相同名称的相应内容属性，并具有相同的默认值。

<强>结论

画布尺寸与画布显示尺寸之间存在差异。

如果您只定义尺寸，那么它也将用作显示尺寸，即画布按比例1：1绘制。

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

You have more information here.

画布上下文的大小调整不正确

1 个答案: