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

Question

为什么此代码在半径为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>

Answer 1

如果您更改此行：

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

为：

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

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

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

Answer 2

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

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

在以网站或PhoneGap / Cordova应用程序开发移动设备时，此功能非常有用。