細かい説明をする前に、いくつかの実例を掲げます。これにより機能やパラメータ等に関するイメージを持てるでしょう。
function drawExplicitFunction(
canvas, canvasWidth, canvasHeight, // Body 部での canvas 名 とサイズ
funct, // f(x) [ ] で囲む 複数指定可能
xmin, xmax, ymin, ymax, // グラフ表示範囲
{options}
)
drawExplicitFunction(
"cvsexp1", 300, 300, // Body 部の記述に合わせる
// <canvas id="cvsexp1" width="300" height="300"></canvas>
["x*(x-1)*(x-2)"], // 複数の式を指定できる。一つのときも [ ] で囲む
// 式の記述は、JavaScript の記法による
-2, 4, -2, 4, // xmin, xmax, ymin, ymax
{ // すべて省略時設定による。この場合も { } が必要
}
);
drawExplicitFunction(
"cvsexp2", 300, 300,
["x*(x-1)*(x-2)"],
-2, 4, -4, 8, // Ｙの範囲拡大
{
XaxisScaleStep : 0.5, // Ｘ軸の目盛りを 0.5 刻み
XaxisFontFixed : 1, // 表示を小数点以下１桁
XaxisFontSize : 10, // フォントを小さく
YaxisScaleStep : 2, // Ｙ軸の目盛りを 0.5 刻み
YgridScaleStep : 1 // 補助線の刻みを１
}
);
drawExplicitFunction(
"cvsexp3", 300, 300,
["x*(x-1)*(x-2)", "x*x"], // 式を２つに
-2, 4, -2, 4,
{
lineColor : ["red", "blue"], // 曲線の色 [ ] で囲む
lineWidth : [6], // 太さ （１つだけだとすべてに共通）
axisColor : "green", // 軸線の色 XaxisColor も YaxisColor も指定したことになる
grid : false, // 補助線（Ｘ・Ｙ両方）を表示しない
canvasFrame : true, // 外枠を引く（補助線がないとき、これを与えると図がしまる）
canvasFrameColor : "green", // 色
canvasFrameWidth : 4, // 太さ
}
);
drawExplicitFunction(
"cvsexp4", 300, 300,
["x*(x-1)*(x-2)", "x*x"],
-2, 4, -2, 4,
{
canvasFillColor : "black", // canvasの色を黒に
lineColor : ["yellow", "aqua"], // それに応じてグラフの色
lineWidth : [6],
axisColor : "white", // 軸の色
axisFontColor : "white", // 目盛り文字の色
legend : true, // 凡例の表示
legendSize : 20, // 文字のサイズ（色はグラフの色と同じ）
}
};
function drawParameterFunction(
canvas, canvasWidth, canvasHeight, // Body 部での canvas 名
Xfunct, Yfunct, // f(t). g(t) [ ] で囲む
xmin, xmax, ymin, ymax, // グラフ表示範囲
tmin, tmax // 媒介変数
{options}
)
drawParameterFunction(
"cvspar1", 300, 300,
"Math.cos(t)", "Math.sin(3*t)", // x = cos(t), y = sin(3t)
// 媒介関数は１組’グラフ１本）だけ。[ ] で囲まない
// 式は JavaScript の記法のこと
-2, 2, -2, 2,
0, 2*Math.PI, // 0～360°
{ // 省略時
}
);
drawParameterFunction(
"cvspar2", 300, 300,
"Math.cos(t)", "Math.sin(3*t)",
-1.5, 1,5, -1.2, 1.5, // グラフを大きく
0, 2*Math.PI,
{
dt : Math.PI/12, // 刻みを粗くする（５°）と曲線が直線のようになる
lineColor : "blue", // 線の色。式と同様に [ ] で囲まない
}
);
drawParameterFunction(
"cvspar3", 300, 300,
"Math.cos(t)", "Math.sin(3*t)",
-2, 2, -2, 2,
0, 2*Math.PI,
{
grid : false,
lineColor : "blue" // 線の色を変更
axisScaleStep : 0.5, // 軸の目盛りを 0.5 にする
axisFontFixed : 1, // 小数点以下１桁まで表示
axisFontSize : 12, // 文字数がながくなるのでフォントを小さくする
legend : "topleft", // 凡例を表示
legendSize : 16
}
);
function drawPolarFunction(
canvas, canvasWidth, canvasHeight, // Body 部での canvas 名
funct, // f(t) [ ] で囲む 複数指定可能
xmin, xmax, ymin, ymax, // グラフ表示範囲
tmin, tmax, // 角度の範囲
{options}
)
drawPolarFunction(
"cvspol1", 300, 300,
["Math.cos(2*t)"],
-1.5, 1.5, -1.5, 1.5,
0, 2*Math.PI,
{ } // すべて省略
);
drawPolarFunction(
"cvspol2", 300, 300,
["Math.cos(2*t)"],
-1.5, 1.5, -1.5, 1.5,
0, 2*Math.PI,
{
grid : false, // いったん、すべての補助線を消す
Rgrid : true, // あらためて同心円補助線を引く
RgridScaleStep : 0.5, // 刻み
Agrid : true // 角度の補助線を引く（省略時は３０°刻み）
}
);
drawPolarFunction(
"cvspol3", 300, 300,
["Math.cos(2*t)", "1.2*Math.sin(3*t)"], // ２つのグラフ
-1.5, 1.5, -1.5, 1.5,
0, 2*Math.PI,
{
canvasFillColor : "black", // canvas 全体の背景色
lineColor : ["white", "aqua"], // グラフの色
lineWidth : [6], // 太さ （１つだけだとすべてに共通）
axis : false, // 軸関係のすべてを非表示
legend : true, // 凡例の表示
legendSize: 16,
}
};
function drawImplicitFunction(
canvas, canvasWidth, canvasHeight, // Body 部での canvas 名
funct, // f(x,y) [ ] で囲む 複数指定可能。表記は Javascript の文法に従う
xmin, xmax, ymin, ymax, // グラフ表示範囲
{options}
)
drawImplicitFunction(
"cvsimp1", 300, 300,
["x*x + y*y - x*y -1"],
-2, 2, -2, 2,
{ } // すべて省略
);
drawImplicitFunction(
"cvsimp2", 300, 300,
["x*x + y*y - x*y -1"],
-2, 2, -2, 2,
{
dx : 0.05, // 刻みを大きくすると点がつながらなくなる
dy : 0.05 // 小さくするＴ時間がかかる
}
);
drawImplicitFunction(
"cvsimp3", 300, 300,
["x*x + y*y - x*y -1", "x*x-y*y*y +x*y -1"], // 式を２つに
-2, 4, -2, 4,
{
EPS : 0.1 // ０判定値を大にすると線が太くなる
// 小さくすると０にならずグラフが表示されない
}
);
drawImplicitFunction(
"cvsimp4", 300, 300,
["x*x + y*y - x*y -1", "x*x-y*y*y +x*y -1"], // 式を２つに
-2, 4, -2, 4,
{
lineColor : ["red", "blue"], // 曲線の色 [ ] で囲む
lineWidth : [6], // 太さ （１つだけだとすべてに共通）
grid : false // 補助線（Ｘ・Ｙ両方）を表示しない
legend : true,
legendSize : 16,
canvasFrame : true, // 外枠を引く
canvasFrameWidth : 4, // 太さ
}
);
この順序で与える
陽関数 媒介関数 極座標関数 陰関数
"canvas名", Width, Height, 〇 〇 〇 〇 Body 部での canvas 名 とサイズ
funct, 〇 × 〇 〇 f(x) [ ] で囲む 複数指定可能
Xfunct, Yfunct, × 〇 × × //
xmin, xmax, ymin, ymax, 〇 〇 〇 〇 グラフ表示範囲
tmin, tmax, × 〇 〇 × 媒介変数、角度変数
満足するグラフをホールインワンで得られることは稀です。まず省略時設定で作成し、必要に応じてパラメタを追加・変更することが必要です。
{ パラメタ１ ; 値１, パラメタ２ ; 値２, … } の形式で与える。
パラメタ名 省略時設定 意味
曲線
lineColor ["black"], // 曲線の色 [ ] で囲み式の個数だけ指定。一つだけだと全式に共通
lineWidth [6], // 太さ 同上
dx (xmax-xmin)/100, // 曲線計算の刻み幅 陽関数、陰関数に適用
dy (ymax-ymin)/100, // 曲線計算の刻み幅 陰関数に適用
dt (tmax-tmin)/90, // 曲線計算の刻み幅 媒介関数 極座標関数に適用
canvas全体
canvasFillColor "white", // canvasの色
canvasFrame false, // 外枠の有無
canvasFrameColor "black", // 色
canvasFrameWidth 6, // 太さ
凡例（与えた式をグラフの左上表示）
legend = false, // 凡例の表示 現在は表示位置は左上に限定
legendSize = 24, // 文字のサイズ（色はグラフの色と同じ）
両軸共通 省略時設定 Ｘ軸 Ｙ軸
軸線
axis true Xaxis Yaxis Ｘ軸・Ｙ軸を引く 以下は True のときだけ有効
axisColor "black" XaxisColor YaxisColor 軸の色
axisWidth 4 XaxisWidth YaxisWidth 太さ
目盛り
axisScale axis, XaxisScale YaxisScale 目盛り文字表示の有無
axisScaleStep 0, XaxisScaleStep YaxisScaleStep 目盛りの刻み間隔 省略時のとき、システムが適当な値に設定
axisFontColor "black", XaxisFontColor YaxisFontColor 目盛り文字の色
axisFontSize 20, XaxisFontSize YaxisFontSize 大きさ
axisFontFixed 0, XaxisFontFixed YaxisFontFixed 小数点以下桁数
補助線
grid axis Xgrid Ygrid
gridScaleStep axisScaleStep, XgridScaleStep YgridScaleStep 補助線の刻み（省略時はaxisScaleStep）
gridColor "gray", XgridColor YgridColor 軸の色
gridWidth 1, XgridWidth YgridWidth 太さ
極座標補助線
同心円補助線 省略時設定 角度補助線 省略時設定
Rgrid false Agrid false
RgridScaleStep axisScaleStep AgridScaleStep Math.PI/15
RgridColor gridColor AgridColor gridColor
RgridWidth gridWidth AgridWidth gridWidth
刻み幅
補助線：gridScaleStep, 目盛り：axisScaleStepが省略値（０）のとき
xmax-xmin の大きさにより、２～５本になるように調整する
p = XaxisStep(); p{0} 刻み幅 p[1] 小数点以下の桁数
XaxisStep()
YaxisStep()
軸線を引く
if (Xaxis) drawLine( … ) のようになる
drawLine(xmin,0, xmax,0, XaxisColor, XaxisWidth)
drawLine(0,ymin, 0,ymax, YaxisColor, YaxisWidth)
目盛りの表示
if (Xaxis) drawXaxisScale( … ) のようになる
XaxisScaleStep ０点を起点とした刻み幅。XaxisScaleStep=0 のとき XaxisStep で自動計算
XaxisFontColor 文字の色
XaxisFontSize フォントサイズ（px）
XaxisFontFixed 小数点以下の桁数
drawXaxisScale(XaxisScaleStep, XaxisFontColor, XaxisFontSize, XaxisFontFixed)
drawYaxisScale(YaxisScaleStep, YaxisFontColor, YaxisFontSize, YaxisFontFixed)
Ｘ－Ｙ系補助線の表示
if (Xgrid) drawXaxisGrid( … ) のようになる
XgridScaleStep ０点を起点とした刻み幅。XgridScaleStep=0 のとき XaxisStep で自動計算
XgridColor 補助線の色
XgridWidth 太さ
drawXaxisGrid(XgridScaleStep, XgridColor, XgridWidth)
function drawYaxisGrid(YgridScaleStep, YgridColor, YgridWidth)
同心円補助線の表示
if (Rgrid) drawXaxisGrid( … ) のようになる
RgridScaleStep ０点を起点とした刻み幅。RgridScaleStep=0 のとき XaxisStep で自動計算
RgridColor 補助線の色
RgridWidth 太さ
drawRgrid(RgridScaleStep, RgridColor, RgridWidth)
角度補助線の表示
if (Rgrid) drawXaxisGrid( … ) のようになる
AgridScaleStep 30°間隔
AgridColor 補助線の色
AgridWidth 太さ
drawAgrid(AgridScaleStep, AgridColor, AgridWidth)
凡例
if (legend) rawLegend( … ) のようになる
funct, Xfunct, Yfunct 式文字列
lineColor 文字の色はグラフの色と同じ
legendSize 文字のサイズ
（媒介関数以外）
drawLegend(funct,lineColor,legendSize)
（媒介関数）
drawLegendParameter(Xfunct, Yfunct, lineColor,legendSize)