このページでは、「JSXGraph」というJavaScriptライブラリを利用して「直線（Line）」を描くJavaScriptコードの書き方をまとめてみたいと思います。
なお、JSXGraphの基本的な使い方は「JavaScriptでオブジェクトを描く」のほうにまとめています。
直線（Line)はBoardオブジェクトのcreateメソッドのパラメータに'line'というエレメントタイプを指定することで生成します。
board1.create('line', [[-2,0], [-1,1]]);
描きたい直線の通る２点の座標を指定します。これによって次の例の左上の直線が描かれます。
直線は「色」「幅」「点線」「矢印」を変更することができます。
上の例の２番目の太い線は次のように描きます。
board1.create('line', [[-2,-1], [0,1]], {strokeColor: 'green', strokeWidth: 4} );
上の例の３番目の点線は次のように描きます。
board1.create('line', [[-2,-2], [0,0]], {strokeColor: '#f00', dash: 3} );
上の例の右下の矢印は次のように描きます。デフォルトでは指定した２点を通って画面一杯に延びる直線が描かれますが、「straightFirst」と「straightLast」にfalseを指定するとそこで線が途切れ、線分になります。
board1.create('line', [[-0.5,-2.5], [2.5,0.5]],
{
straightFirst: false, straightLast: false,
firstArrow: {type:3, size:10}, lastArrow: {type:5, size:15},
}
);
矢印の種類と大きさも指定しています。矢印の種類は「type」に1～7の整数値で指定します。各整数値で描かれる矢印の形はJSXGraphのリファレンスで次のように示されています。
