貝塞爾曲線在HTML5畫布中繪制拉伸的橢圓

Question

這種繪制橢圓的方法看起來很簡潔： http ： //www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

但是，在測試中，我發現生成的橢圓被拉伸了。 設置寬度和高度相等時，我得到的橢圓形比寬度高20％。 這是width = height = 50的結果：

為了確保方法本身存在問題，我嘗試更改算法，以使用於Bezier曲線的所有點都旋轉90度。 結果：

同樣，在兩種情況下，我都期望有一個50x50的圓圈。 使用如何在html5畫布中繪制橢圓形中所述的arc方法？ 可以正常工作，生成完美的50x50圓形（然后可以使用scale將其拉伸成橢圓形）。

這是怎么回事？

Answer 1

在寫我的問題時，我意識到我誤解了貝塞爾曲線控制點的工作方式。 仔細觀察我使用的資源 ，橢圓的弧線永遠不會觸及圖中的x - width / 2和x + width / 2邊界。 因此，它根本不是真正的“寬度”。

將來，我會堅持使用arc而不是bezierCurveTo 。

（可以使用“ kappa”對此進行調整；請參見此答案 。如果您使用的是stroke而不是fill ，則這種方法比起弧線更可取，因為scale會導致線條粗細不均勻。）