Bezier曲线在HTML5画布中绘制拉伸的椭圆

时间:2011-04-17 16:45:19

标签: javascript html5 canvas bezier ellipse

这种绘制椭圆的方法看起来干净而优雅:http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

然而,在测试中,我发现产生的椭圆被拉伸了。设置宽度和高度相等,我得到的椭圆比宽度高约20%。以下是width = height = 50的结果:

Tall canvas ellipse (should be circle)

为了确保方法本身存在问题,我尝试更改算法,以便将用于贝塞尔曲线的所有点旋转90度。结果:

Wide canvas ellipse(should be circle

同样,在这两种情况下,我都期待50x50圈。使用How to draw an oval in html5 canvas?中描述的arc方法可以正常工作,生成完美的50x50圆圈(然后可以使用scale将其拉伸为椭圆)。

发生了什么事?

1 个答案:

答案 0 :(得分:3)

在写我的问题时,我意识到我误解了Bézier曲线控制点的工作方式。仔细观察我使用的resource,椭圆的弧线永远不会触及图中的x - width / 2x + width / 2边界。所以它根本不是“宽度”。

将来,我会坚持使用arc代替bezierCurveTo

(可以使用“kappa”对此进行调整;请参阅this answer。如果您使用的是stroke,而不仅仅是fill,那么这种方法优于弧形,因为scale会导致线条粗细不均匀。)