这种绘制椭圆的方法看起来干净而优雅：http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/ http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/
然而，在测试时，我发现生成的椭圆被拉伸了。将宽度和高度设置为相等，我得到的椭圆的高度比宽度大约高 20%。这是结果width = height = 50:
为了确保问题出在方法本身上，我尝试更改算法，以便用于贝塞尔曲线的所有点都旋转 90 度。结果：
同样，在这两种情况下，我都期望得到一个 50x50 的圆圈。使用arc方法描述于如何在html5画布上绘制椭圆形？ https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas工作正常，生成完美的 50x50 圆（然后可以使用将其拉伸为椭圆形）scale).
这是怎么回事？
在写我的问题时，我意识到我误解了贝塞尔曲线控制点的工作方式。更仔细地观察resource http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/我正在使用，椭圆的弧线从未接触过x - width / 2 and x + width / 2图中的边界。所以它根本不是真正的“宽度”。
未来我会坚持arc代替bezierCurveTo.
（可以使用“kappa”对此进行调整；请参阅这个答案 https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/2173084#2173084。如果您使用的是，这种方法比 arc 更可取stroke，不仅仅是一个fill, since scale会导致线条粗细不均匀。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
