贝塞尔曲线在HTML5画布中绘制拉伸的椭圆形

|| 这种绘制椭圆的方法看起来很简洁:http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/ 但是,在测试中,我发现生成的椭圆被拉伸了。设置宽度和高度相等时,我得到的椭圆形比宽度高20%。这是
width = height = 50
的结果: 为了确保方法本身存在问题,我尝试更改算法,以使用于Bezier曲线的所有点都旋转90度。结果: 同样,在两种情况下,我都期望有一个50x50的圆圈。使用如何在html5画布中绘制椭圆形中所述的
arc
方法?效果很好,可以生成完美的50x50圆(然后可以使用
scale
将其拉伸成椭圆形)。 这是怎么回事?     
已邀请:
在写我的问题时,我意识到我误解了贝塞尔曲线控制点的工作方式。仔细观察我使用的资源,椭圆的弧线永远不会触及图中的
x - width / 2
x + width / 2
边界。因此,它根本不是真正的“宽度”。 将来,我会坚持使用
arc
而不是
bezierCurveTo
。 (可以使用\“ kappa \\”对此进行调整;请参见此答案。如果您使用的是
stroke
,而不仅仅是
fill
,则这种方法比起弧线更可取,因为
scale
会导致线宽不均匀。 )     

要回复问题请先登录注册