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會造成不均勻的線條粗細。）