Javascript 画布：圆弧（75,75,50,0,3.1415，真）绘制椭圆形而不是圆形

为什么该代码在半径为50的位置（75,75）绘制椭圆形而不是圆形

<canvas id=c1 style="width:400;height:400">
<script>
    ctx = c1.getContext('2d');
    ctx.fillStyle = '#7ef';
    ctx.fillRect(0, 0, 400, 400);
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true)
    ctx.stroke();
</script>

ctx=c1.getContext（'2d'）；
ctx.fillStyle='#7ef'；
ctx.fillRect（0,040400）；
ctx.fillStyle='#000'；
ctx.beginPath（）；
ctx.arc（75,75,50,0，数学PI*2，真）
ctx.stroke（）；

---

如果更改此行：

<canvas id=c1 style="width:400;height:400">

致：

它应该会起作用。不要使用CSS设置画布大小，因为这只会影响元素，而不会影响位图本身。对于画布，您需要使用其专用属性（宽度/高度）来设置位图大小，或者位图只是拉伸/缩放以匹配元素的大小

---

画布的默认大小（如果未指定）为300x150像素。在这种情况下，这些像素被拉伸（作为图像）到400x400，这就是为什么您会得到一个椭圆形。

如果画布的大小是动态的，并且在开发时不知道，您可以在知道浏览器已经适当地定位和调整了元素的大小时，使用JavaScript设置大小：

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

---

这在为手机开发网站或PhoneGap/Cordova应用程序时非常有用。

@exebook CSS只影响元素，不影响位图。它就像一个300x150的图像，设置为css大小400x400，它会被拉伸。画布与图像相同，只是可编辑。因此，当我省略画布宽度/高度参数时，它们被设置为一些奇怪的默认值？对我来说非常有用！谢谢

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;