为什么canvas的圆弧是扭曲的有高度？

Question

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

编辑：根据下面 Darren Sweeney 的回答，canvas 的身高似乎有问题。但是我的布局需要高度。有什么解决方法吗？提前致谢！

这是我的代码：

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();

以下是 link 的 jsFiddle 演示：Click Here

Answer 1

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

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

注意你可以设置高度，只要它是宽度的一半那么比例就会保持真实，例如：

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

Answer 2

不要使用 CSS 调整 canvas 元素的大小。这会导致失真，因为 CSS 调整 "stretches" 像素大小（将圆拉伸成椭圆）。 html canvas 的默认大小是 300x150。

改为直接使用其宽度和高度属性调整 canvas 元素的大小。

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

或在JavaScript

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

为什么canvas的圆弧是扭曲的有高度？

Why circular arc is disorted if canvas has height?

html

jquery

canvas

html5-canvas