Canvas：arc（75,75,50,0,3.1415,true）绘制的是椭圆而不是圆形。

Question

为什么这段代码在位置 (75, 75) 处以半径为 50 画椭圆而不是圆形？

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

- exebook

Answer 1

如果你改变了这一行：

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

至：

<canvas id=c1 width=400 height=400></canvas>

应该可以工作。不要使用CSS设置Canvas大小，因为这只影响元素而不是位图本身。对于canvas，您需要使用其专用属性（宽度/高度）来设置位图大小，否则位图将被拉伸/缩放以匹配元素的大小。

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

- user1693593

---

@exebook CSS 只影响元素而不影响位图。就像一个设置为 CSS 大小 400x400 的 300x150 图像，它会被拉伸。画布与图像相同，只是可编辑的。 - user1693593

当我省略画布的宽度/高度参数时，它们会被设置为一些奇怪的默认值吗？ - exebook

Answer 2

在画布的大小是动态且在开发时不知道大小的情况下，当您已经知道浏览器已经正确定位和调整元素的大小时，可以使用JavaScript设置大小：

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

这在移动端开发时非常有用，无论是网站还是PhoneGap/Cordova应用。

- Mr. TA

---

对我来说非常好用！谢谢！ - kevinstueber