タグ

参考とcanvasに関するkyo_agoのブックマーク (1)

  • ベジェ曲線で楕円を描く(3)

    続き。HTML5のCanvasで楕円を何とかして描く。まず楕円の持ってるパラメータは以下のようなかんじ。aがx方向の軸の長さ、bがy方向の軸の長さ。 楕円の方程式を媒介変数を用いて表すと、 この式を前回の円の式と同様にt=0.5としてベジェ曲線の式と連立させて解くことで制御点の座標を求める。制御点のパラメータは円の場合はxとyともに同じだったが楕円の場合は別々に求める。 前回と同様にしてmとnを求めると この値を使ってベジェ曲線で楕円を描いてみる。 右の楕円は直線で100分割して近似して描いたもの。ほとんど同じなので多分あっている。でも直線で100分割程度で十分きれいな楕円が描けるならわざわざベジェ曲線で描く意味がなかったかも。ちなみにSketchpadの楕円は直線で描いてるみたい。 とりあえずソースコード載せときますね。CanvasのstrokeRectライクに使えるようにCanvasR

    ベジェ曲線で楕円を描く(3)
  • 1