画布:弧形(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应用程序进行移动开发时，这很有用。