这种绘制椭圆的方法看起来干净而优雅: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
将其拉伸为椭圆)。
发生了什么事?
答案 0 :(得分:3)
在写我的问题时,我意识到我误解了Bézier曲线控制点的工作方式。仔细观察我使用的resource,椭圆的弧线永远不会触及图中的x - width / 2
和x + width / 2
边界。所以它根本不是“宽度”。
将来,我会坚持使用arc
代替bezierCurveTo
。
(可以使用“kappa”对此进行调整;请参阅this answer。如果您使用的是stroke
,而不仅仅是fill
,那么这种方法优于弧形,因为scale
会导致线条粗细不均匀。)