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

Question

这用于绘制椭圆方法似乎是清洁和雅致：http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

然而，在测试它，我发现所得椭圆被拉伸。设置宽度和高度相等，我得到的椭圆比宽度高大约20％。这里的结果与width = height = 50：

为了确保该问题是与方法本身，我试图改变使得用于贝塞尔曲线的所有点都旋转90度的算法。其结果是：

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

发生了什么事？

Answer 1

在写我的问题时，我意识到我误解了贝塞尔曲线控制点的工作方式。仔细查看我使用的resource时，椭圆的弧线从未触及图中的x - width/2和x + width/2边界。所以它根本不是“宽度”。我会坚持arc而不是bezierCurveTo。

（这是可能的使用“卡帕”这个调整;见this answer这种方法最好，如果您使用的是stroke，而不仅仅是一个fill电弧，因为scale会造成不均匀的线条粗细。）