为什么我的绘图与画布大小成比例？

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，圆也会变成两倍大。如果我将我的画布变成正方形，圆就会向下拉伸，反之亦然。

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

- Bluefire

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';

- Michał Perłakowski