2

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

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

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

最后，我得到了这样的结果：

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

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

谁能进一步帮助我？

4

1 回答 1

0

bezierCurveTo 函数实际上绘制了三次贝塞尔曲线的最后三个节点

三次贝塞尔曲线需要绘制 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/

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

我希望这会有所帮助。

于 2012-07-26T19:48:07.417 回答