使用js在HTML5 Canvas中绘制不对称椭圆？

Question

我一直在尝试使用HTML5 Javascript绘制不对称椭圆，

我的第一次尝试是使用弧和刻度，但我只能使用它生成对称椭圆，

所以我的第二次尝试是使用贝塞尔曲线。哪个是主要问题，我不明白它们是如何工作的......

最后，我最终得到了类似的东西：

http://jsfiddle.net/eLEUD/4/

它有效，但我在那里修改了硬编码，一旦你改变了点，它就会停止工作。我不知道如何计算它们......

谁可以帮助我？

Answer 1

bezierCurveTo函数实际绘制了Cubic Bezier Curve的最后三个节点

立方贝塞尔曲线需要绘制4个点：

• P1：曲线的起点。
• P2：曲线朝向但不接触的第一个点。
• P3：曲线朝向但不接触的第二个点。
• P4：曲线的终点。

鉴于此，代码看起来像这样（假设P1，P2，P3，P4是点结构）：

//move to the first part of the curve
context.moveTo(P1.x, P1.y);
//draw the curve.
context.bezierCurveTo(P2.x, P2.y,
                  P3.x, P3.y,
                  P4.x, P4.y);

bezierCurveTo函数将画布上下文所处的任何点视为第一个锚点。

至于绘制你的鸡蛋形状，你只需要摆弄它，直到你对你正在寻找的任何形状感到满意为止。

我希望有所帮助。

---

修改

似乎你可能正在尝试在内部绘制一个鸡蛋形状的钻石形状......所以我已经更新了你的小提琴来做到这一点。在这里看到绿色的鸡蛋形状：

http://jsfiddle.net/blesh/zVWrH/1/

我所做的是计算钻石周围的其他点：东北，东北，等等，并用它们作为锚点。

我希望有所帮助。