2

HTML5 Javascript を使用して非対称楕円を描画しようとしていますが、

私の最初の試みは、円弧とスケールを使用することでしたが、それを使用して対称的な楕円しか生成できませんでした。

そこで、2 回目の試みはベジエ曲線を使用することでした。それらがどのように機能するのか理解できないという主な問題がありました...

結局、私は次のようなものになりました：

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

動作しますが、修飾子がハードコーディングされているため、ポイントを変更するとすぐに動作しなくなります。計算の仕方がわからないのですが…

誰が私をさらに助けることができますか?

4

1 に答える 1

0

bezierCurveTo 関数は、実際には 3次ベジェ曲線の最後の 3 つのノードを描画します

3 次ベジエ曲線を描くには 4 つの点が必要です。

  • P1: 曲線の始点。
  • P2: カーブが向かっているが接触していない最初のポイント。
  • P3: 曲線が向かっているが接触していない 2 番目のポイント。
  • 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 に答える