贝塞尔曲线在 HTML5 画布中绘制拉伸椭圆
这种绘制椭圆的方法看起来干净而优雅： http ://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/
但是，在测试过程中，我发现生成的椭圆被拉伸了。将宽度和高度设置为相等，我得到的椭圆的高度比宽度大约高 20%。这是 width = height = 50 的结果：
>确保问题出在方法本身，我尝试更改算法，以便用于贝塞尔曲线的所有点都旋转 90 度。结果：
再次，在这两种情况下，我都期待一个 50x50 的圆圈。使用 < code>arc 方法描述于如何绘制椭圆形html5 canvas？ 工作正常，生成完美的 50x50 圆形（然后可以使用 scale 将其拉伸为椭圆形）
。
This method for drawing ellipses appears to be clean and elegant: http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/
However, in testing it, I found that the resulting ellipses were stretched. Setting width and height equal, I got ellipses that were about 20% taller than wide. Here's the result with width = height = 50:
To make sure that the problem was with the method itself, I tried changing the algorithm so that all the points used for the Bezier curves were rotated 90 degrees. The result:
Again, in both cases, I was expecting a 50x50 circle. Using the arc method described at How to draw an oval in html5 canvas? works fine, generating perfect 50x50 circles (which can then be stretched into ellipses using scale).
What's going on?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在写我的问题时，我意识到我误解了贝塞尔曲线控制点的工作方式。更仔细地查看我正在使用的资源 ，椭圆的弧线永远不会接触图中的
x - width / 2和x + width / 2边界。所以它根本不是真正的“宽度”。将来，我将坚持使用
arc而不是bezierCurveTo。（可以使用“kappa”对此进行调整；请参阅这个答案。如果您使用
笔划，而不仅仅是填充，则该方法比弧线更可取，因为缩放> 会导致线条粗细不均匀。）In writing my question, I realized that I misunderstood the way Bézier curve control points work. Looking more closely at the resource I was using, the ellipse's arcs never touch the
x - width / 2andx + width / 2boundaries in the figure. So it's not really "width" at all.In the future, I'll stick with
arcinstead ofbezierCurveTo.(It's possible to adjust for this using a "kappa"; see this answer. That approach is preferable to arc if you're using a
stroke, not just afill, sincescalewill cause uneven line thickness.)