使用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/

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

希望对你有帮助。