Question

我有一个定义为

的画布

<canvas id="field"></canvas>

的style.css：

canvas#field {
    width: 500px;
    height: 250px;
    border: 3px solid black; /* for now */
}

每当我尝试在其上绘制内容时，例如

var ctx = field.getContext("2d")
// circle
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

它总是最终相对于画布尺寸进行调整。如果我将画布的两倍大，那么圆圈也是两倍大，即使我的半径总是50px。如果我将画布变成正方形，则圆圈向下伸长，反之亦然，如果我将画布向外拉伸。

如何让画布将我给它的数字视为绝对值？

Answer 1

您应该将画布宽度和高度设置为HTML属性而不是CSS规则：

<canvas id="field" width="500" height="250"></canvas>

引用MDN：

<canvas>元素只有两个属性，width和height。这些都是可选的，也可以使用DOM属性进行设置。如果未指定width和height属性，则画布最初将为300像素宽，150像素高。该元素可以通过CSS任意调整大小，但在渲染过程中，图像会缩放以适合其布局大小：如果CSS大小不符合初始画布的比例，则会显示失真。

您还可以使用JavaScript动态设置width和height：

const canvas = document.querySelector('canvas');
canvas.width = '500';
canvas.height = '250';

为什么我的图纸尺寸相对于画布大小？

1 个答案: