Bezier曲线在HTML5画布中绘制拉伸的椭圆

Question

这种绘制椭圆的方法看起来干净而优雅：http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

然而，在测试中，我发现产生的椭圆被拉伸了。设置宽度和高度相等，我得到的椭圆比宽度高约20％。以下是width = height = 50的结果：

为了确保方法本身存在问题，我尝试更改算法，以便将用于贝塞尔曲线的所有点旋转90度。结果：

同样，在这两种情况下，我都期待50x50圈。使用How to draw an oval in html5 canvas?中描述的arc方法可以正常工作，生成完美的50x50圆圈（然后可以使用scale将其拉伸为椭圆）。

发生了什么事？

Answer 1

在写我的问题时，我意识到我误解了Bézier曲线控制点的工作方式。仔细观察我使用的resource，椭圆的弧线永远不会触及图中的x - width / 2和x + width / 2边界。所以它根本不是“宽度”。

将来，我会坚持使用arc代替bezierCurveTo。

（可以使用“kappa”对此进行调整;请参阅this answer。如果您使用的是stroke，而不仅仅是fill，那么这种方法优于弧形，因为scale会导致线条粗细不均匀。）