Question

我正在尝试在<canvas>元素中绘制圆弧。但由于某种原因，产生的弧是椭圆形而不是圆形。

编辑：根据下面的 Darren Sweeney 的答案，看起来画布的高度是个问题。但我的布局需要高度。任何解决方法？提前谢谢！

这是我的代码：

HTML

<canvas class="canvas" id="canvas"></canvas>

CSS

.canvas{width:400px; height:400px; background:#ccc;}

的jQuery

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = canvas.width/2;
var y = canvas.height/2;
var radius = 50;
var startAngle = 0 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;

// line color
context.strokeStyle = '#eeeeee';
context.stroke();

以下链接到jsFiddle演示：Click Here

Answer 1

不要使用CSS调整canvas元素的大小。这会导致你的失真，因为CSS调整大小＆＃34;延伸＆＃34;像素（将圆圈拉伸成椭圆）。 html画布的默认大小为300x150。

而是直接使用它的宽度＆amp;来调整画布元素的大小。身高属性。

<canvas class="canvas" id="canvas" width=400 height=400></canvas>

或在JavaScript中

var canvas=getElementById('canvas');
canvas.width=400;
canvas.height=400;

Answer 2

改变你的CSS，一切都很好：

.canvas{width:400px; height: auto; background:#ccc;}

注意您可以设置高度，只要它的宽度是宽度的一半，那么比率将保持为真，例如：

.canvas{width:400px; height: 200px; background:#ccc;}

如果画布有高度，为什么圆弧会扭曲？

2 个答案: