2

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

然而，在测试它时，我发现生成的椭圆被拉伸了。设置宽度和高度相等，我得到的椭圆比宽度高约 20%。这是结果width = height = 50：

高画布椭圆（应该是圆形）

为了确保问题出在方法本身，我尝试更改算法，使用于贝塞尔曲线的所有点都旋转 90 度。结果：

宽画布椭圆（应该是圆形

同样，在这两种情况下，我都期待一个 50x50 的圆圈。使用如何arc在html5 画布中绘制椭圆？工作正常，生成完美的 50x50 圆圈（然后可以使用 将其拉伸成椭圆scale）。

这是怎么回事？

4

1 回答 1

4

在写我的问题时，我意识到我误解了贝塞尔曲线控制点的工作方式。仔细观察我使用的资源，椭圆的弧线从未触及图中的x - width / 2和x + width / 2边界。所以它根本不是真正的“宽度”。

将来，我会坚持使用arc而不是bezierCurveTo.

（可以使用“kappa”对此进行调整；请参阅此答案。如果您使用的是 a stroke，而不仅仅是 a ，则该方法比 arc 更可取fill，因为scale会导致线条粗细不均匀。）

于 2011-04-17T16:45:31.093 回答