「note」に引っ越し中です。移動したページごとに移動先へのリンクを作っていく予定です。

JavaScriptで円を描く

 このページでは、「JSXGraph」というJavaScriptライブラリを利用して「円(Circle)」を描くJavaScriptコードの書き方をまとめてみたいと思います。 

 なお、JSXGraphの基本的な使い方は「JavaScriptでオブジェクトを描く」のほうにまとめています。

 円(Circle)はBoardオブジェクトのcreateメソッドのパラメータに'circle'というエレメントタイプを指定することで生成します。

board1.create('circle', [[-2,0], [-1,1]]);

 描きたい円の中心と、もう一点、円の通る点の座標を指定します。円の通る点を指定する代わりに半径の値を指定することもできます。

 円のストロークの太さや色などの指定は「直線を描く」のときと同様です。

 次のようなサンプルを描いてみました。


 青い円は中心と半径だけ指定したものです。

var c1 = board1.create('Circle', [[0,0], 1]);

 赤い円は中心と通る点を指定したものです。

var c2 = board1.create('Circle', [[0,0], [1,1]], {strokeColor: 'red'});

 黄色い円は中心の座標を直接書くのではなく、すでにあるCircleオブジェクト「c1」のcenterという属性で指定したものです。

var c3 = board1.create('Circle', [c1.center, 2], {strokeColor: 'yellow'});

 緑の円は半径の指定を、すでにあるCircleオブジェクト「c1」のradiusという属性で指定したものです。

var c4 = board1.create('Circle', [[1,1], c1.radius], {strokeColor: 'green'});

 SVG形式の円/弧のようにさらに角度を指定することで弧にすることはできないようで、それは"arc"や"ellipse"タイプのオブジェクトで描くことになっているようです。