为什么我的绘图大小相对于画布大小？

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大小不考虑初始画布的比例，则会出现扭曲。

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

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