投稿者 tel | 2010年2月24日

ベジェ曲線で楕円をかく

JavaScriptでCanvasを試してたわけですが、図形を描くメソッドに楕円がなかったのでなんとかベジェ曲線で描こうとしてみた。

Canvasでは基本的に図形を描くにはパスを定義する。パスを定義するにはbeginPathメソッドを呼び出してclosePathまたはfill、strokeメソッドで閉じる。で、パスを定義するメソッドで代表的なのは次のもの。

  • lineTo
  • arc
  • quadraticCurveTo
  • bezierCurveTo

円はarcを使って描ける。楕円はquadraticCurveTo(2次ベジェ曲線)関数かbezierCurveTo(3次ベジェ曲線)関数を使って描けるかな。

とりあえず円をベジェ曲線を使って描いてみる。円は楕円の特殊な場合だな。たぶん。

まず2次のベジェ曲線のについて。2次ベジェ曲線は始点と終点とひとつの制御点からなる。図で青の点が制御点。

これだ4分割では円が表せないっぽい。円を表すには分割数を多くしないといけないみたい。というわけで3次ベジェ曲線を使って円を表すことにする。以下ソースコード。fillCircleはプロトタイプに勝手に追加した塗りつぶした円を描くメソッド。

var ctx = document.getElementById('test').getContext('2d');
ctx.lineWidth = 2.0;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(100, 200, 200, 200)
ctx.stroke();
// ハンドル
ctx.lineWidth = 1.0;
ctx.strokeStyle = '#0A0';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.moveTo(200, 200);
ctx.lineTo(100, 200);
ctx.stroke();
// 始点と終点
ctx.fillStyle = '#A00';
ctx.fillCircle(100, 100, 3);
ctx.fillCircle(200, 200, 3);
// 制御点
ctx.fillStyle = '#00A';
ctx.fillCircle(100, 200, 3);

次は3次ベジェ曲線を試す。次回に続く。


		

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。