贝塞尔曲线在 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

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

以后，我会坚持使用arc，而不是bezierCurveTo。

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