这种绘制椭圆的方法看起来干净优雅:http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/
但是，在测试时，我发现生成的椭圆被拉伸(stretch)了。将宽度和高度设置为相等，我得到的椭圆的高度比宽度大约高 20%。这是 width = height = 50 的结果:
为了确保问题出在方法本身，我尝试更改算法，以便用于贝塞尔曲线的所有点都旋转 90 度。结果:
同样，在这两种情况下，我都期望得到一个 50x50 的圆圈。使用 How to draw an oval in html5 canvas? 处描述的 arc 方法效果很好，可以生成完美的 50x50 圆(然后可以使用 scale 将其拉伸(stretch)为椭圆形)。
发生什么事了？
最佳答案
在写我的问题时，我意识到我误解了贝塞尔曲线控制点的工作方式。更仔细地观察resource我使用的是，椭圆的弧线永远不会接触图中的 x - width/2 和 x + width/2 边界。所以它根本不是真正的“宽度”。
将来，我将坚持使用 arc 而不是 bezierCurveTo。
(可以使用“kappa”对此进行调整；请参阅 this answer 。如果您使用的是描边，而不仅仅是填充<，则该方法优于弧形，因为缩放会导致线条粗细不均匀。)
关于javascript - 贝塞尔曲线在 HTML5 Canvas 中绘制拉伸(stretch)椭圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5694855/