CANVAS 関連 setScreen Canvasの定義（必須） clearScreen Canvasのクリア saveCanvas Canvasの保存 restoreCanvas Canvasの復元 ドロー系図形 drawPoint 点 drawLine 直線 drawLineArrow 矢印付きの直線 drawRect 長方形 drawTri 三角形 drawPolygon 多角形 drawRegularPolygon 正多角形 drawCircle 円 drawEllipse 楕円 drawArc 円弧 drawArcArrow 矢印付き円弧 drawArcFan 扇形 drawBezie2 ２次ベジェ曲線（制御点１個) drawBezie3 ３次ベジェ曲線（制御点２個) 文字列 drawText 文字列 drawTextRotate1 文字列の回転 drawTextRotate2 文字列の回転（２点指定） 画像 drawImage 画像 drawImageZPR 画像のズームや回転 数式のグラフ drawFx 陽関数 y = F(x) drawTxy 媒介関数 x = Fx(t), y = Fy(t) drawRt 極座標関数 r = Rt(t), x=r*cos(t), y=r*sin(t) drawFxy 陰関数 Fxy(x,y)=0 drawZxy 等高線 Zxy(x,y)=z drawWuv ３次元座標陽関数 w = Ｗ(u,v) 軸、補助線 drawLineYscale 補助線（Ｙ軸、水平線） drawLineXscale 補助線（Ｘ軸、垂直線） drawTextXYscale 水平軸の下、垂直軸の左に目盛り drawTextXscale 水平軸の下に目盛り drawTextYscale 垂直軸の左に目盛り axisStepFixed 補助線や目盛りの刻み幅の自動計算 drawConCircle 放射状補助線 drawLineRad 放射状補助線 drawWuvAxis ３次元ＵＶＷ座標系の軸表示 drawLegend 凡例の表示 支援関数 toXY 座標変換 (w,h)→(x,y) toWH 座標変換 (x,y)→(w,h) color3a 色表示変換 #rggbb","rgb(r,g,b)", "fgba(r,g.b.a)"→[red,green,blue,alfa] colorHEX 色表示変換 [red,green,blue,alfa] → #rggbb","rgb(r,g,b)", "fgba(r,g.b.a)" toRad 角度変換 度数法→ラジアン toDeg 角度変換 ラジアン→度数法 rotateByAngle 回転移動後の点座標 symmetryPoint 軸対象の点 UVWtoXY ３次元座標(u,v,w) の２次元座標(x,y)への射影 特殊な機能 clickCanvas クリック点の座標、色の表示
canvasxy.jsでは、最初に呼ばれる setCanvas で、
canvas = document.getElementById(canvasname);
ctx = canvas.getContext('2d');
によりcanvasを定義しています。
そして、次の値を与えることにより、Ｗ－Ｈ座標系とＸ－Ｙ座標系の対応をしています。
cw = 400; ch = 400;
xmin = -4; xmax = 4; ymin = -4; ymax = 4;
また、canvasの全ピクセルの保管用に canvasImageData があります。
これら赤字の変数は、グローバル変数として定義しています。
setCanvas(canvasname, backcolor [, w, h, xxmin, xxmax, xymin, yymax]) canvasname // HTML で定義した canvas名 backcolor // 背景色 w,h // canvasのサイズ。グローバル変数のcw,chに相当（HTMLでの定義のままなら省略） xxmin,xxmax,yymin,yymax // グローバル変数のxmin,xmax,ymin,ymax に相当 後で設定してもよい。
setCanvasA <canvas id="setCanvasA" width="300" height="200"></canvas>
HTMLでの指定のまま setCanvas("setCanvasA", "red");
setCanvasB <canvas id="setCanvasB"></canvas>
HTMLでは指定なし。200,150 に設定 setCanvas("setCanvasB", "green", 200, 150);
setCanvasC <canvas id="setCanvasC" width="80" height="60"></canvas>
HTMLでの指定を 100,200 に変更 setCanvas("setCanvasC", "blue", 100, 200);
実行結果
|
setCanvasA |
setCanvasB |
setCanvasC |
canvasxyを利用するには、それに先立ち、HTML に記述した canvas を JavaScript に伝える必要があります。
それが setCanvas であり、setCanvas は最初に一回だけ記述しなければなりません。
| 引数にグローバル変数（cwやxxmin等）を与えるとき | 引数にグローバル変数を与えないとき |
function setCanvasRei1() {
// ========= setCanvas
// cw=400; ch=300; xmin=-4; xmax=4; ymin=-3; ymax=-3 とする
setCanvas("canvasD", "yellow", 400,300, -4,4, -3,3);
// =========== 以降、任意の関数の表示ができる
// 補助線と目盛
drawLineXscale(1, "gray", 1, "black", 4);
drawLineYscale(1, "gray", 1, "black", 4);
drawTextXYscale(-4, 4, 1, -3,3, 1, "black", 16);
// 直線
drawLine(-2, 1, 3, -2, "blue", 6);
// 画像
drawImage("120x80.jpg", -2,-1);
// 矩形
drawRect(-1,1, 2,2, "red", 4, "none");
}
|
function setCanvasRei2() {
// ========= setCanvas
setCanvas("canvasE", "white");
// ========= グローバル変数の設定
// CANVASの横幅cwと縦幅ch（HTMLでのサイズを使うなら省略可能）
cw = 400; ch = 300;
// xy座標系での範囲指定
xmin = -4; xmax = 4; ymin = -3; ymax = 3;
// =========== 以降、任意の関数の表示ができる
// 上と同じ
}
|
|
<canvas id="canvasD" width="80" height="60"></canvas> |
<canvas id="canvasE" width="400" height="300"></canvas> |
clearCanvas(fillcolor); clearScreen(fillcolor);
clearCanvas("gray"); // canvas全体を gray で塗りつぶす。
clearScreen("yellow"); // canvas全体を yellow で塗りつぶす。
saveCanvas(); restoreCanvas();
saveCanvasは、canvas画面をビットマップ情報にして、グローバル変数canvasImageDataに保存 restoreCanvasは、canvasImageDataからcanvas画面を復元 組合せることにより、最近に追加した要素を取り消して前の画面に復元することができる。 しかし、その画面はビットマップでありドロー情報は失われている。
ステップ１ 保存する直前までのcanvasを表示（補助線、画像） ステップ２ canvasImageDataに保存。canvas画面は変わらない ステップ３ ステップ１の画面に追加（直線） ステップ４ ステップ２の画面に復元（ステップ３の直線は消去） ステップ５ ステップ４の画面に追加（直線）
drawPoint(x,y, pointcolor, pointsize)
drawPoint(1.4, 1.5, "red", 6); // 中心点(1.4, 1.5)に、"red"色でピクセル６の正方形の点
drawLine(x0,y0, x1,y1, linecolor, linewidth [,dash])
drawLine(-1, 1, 3, 2, "red", 4); // 起点(-1, 1)、終点( 3, 2)、"red"色、太さ４の実線 drawLine(-3, 1, 2, -2, "blue", 2, [8,4]); // 破線 drawLine(-3, -2.5, 3, -2.5, "green", 2, [40,4, 4,4]); // 鎖線
drawLineArrow(x0,y0, x1,y1, linecolor, linewidth, arrow [,dash])
arrow = "end" （省略時）点(x1,y1)に付ける
"start" 点(x0,y0)
"both" 両点
drawLineArrow(-1, 1, 3, 2, "red", 4, "end"); // (3,2) に矢印
drawLineArrow(-3, 1, 2, -2, "blue", 2, "start", [8,4]); // (-3,1) に矢印
drawLineArrow(-2,-2, 3, -3, "green", 2, "both"); // 両端に矢印
drawRect(x0,y0, x1,y1, linecolor, linewidth, fillcolor [,dash])
drawRect(-3, 3, 1, 1, "red", 4, "none"); // 枠のみ
drawRect(-3,-1, 1,-3, "blue", 4, "rgba(0,0,255, 0.3)"); // 塗りつぶし
drawRect( 2, 2, 3,-2, "green", 4, "none", [4,2]);
drawRect(xmin,ymin, xmax,ymax, "black", 4, "none"); // CANVASの枠
drawTri(x0,y0, x1,y1, x2,y2, linecolor, linewidth, fillcolor [,dash])
drawTri(-1,-1, 1 2, 3,0, "blue", 4, "yellow"); // ３点((-1,-1)、(1 2)、(3,0)を頂点とする三角形。枠線は"blue"色で太さ4．内部は"yellow"色
drawPolygondrawPolygon(xyarray, linecolor, linewidth, fillcolor [,dash]);
xyarray：各頂点(x,y)の配列。[ [x0,y0],[x1,y1],…,[xn,yn] ]
赤の５角形
var xyarray1 = [ [-2,2],[0,3],[1,2],[1,1],[-1,1] ];
drawPolygon(xyarray1, "red", 4, "none");
青の５角形
var xyarray2 = [ [-2,-1],[0,-2],[2,-1],[2,-3],[-2,-3] ];
drawPolygon(xyarray2, "blue", 4, "rgba(0,0,255,0.3)", [8,4]);
透過率 破線
drawRegularPolygon(n, x,y, r, base, type, linecolor, linewidth, fillcolor [,dash])
n： ≧３ ｎ角形、辺・頂点の数
x,y： 正多角形の外接円の中心座標
r： その半径
base： ０＝円中心の下が底辺、１＝円中心の下が頂点
type： ０＝周辺のみを表示、１＝対角線だけを表示、２＝周辺と対角線を表示
linecolor：線（周辺、対角線）の太さ
fillcolor：正多角形内部の色。 塗らないときは "none" 対角線部分だけの塗りつぶしはできない
n x,y r base type
drawRegularPolygon(5, -2,2, 1, 0, 0, "red", 2, "rgba(255,0,0,0.3)"); // 上左図：下底辺、周辺のみ
drawRegularPolygon(5, 2,2, 1, 1, 1, "blue", 2, "none"); // 上右図：下頂点、対角線のみ
drawRegularPolygon(5, -2,-2, 1, 0, 2, "green", 2, "rgba(0,255,0, 0.3)", [8,4]); // 下左図：下底辺、両方
drawRegularPolygon(5, 2,-2, 1, 0, 1, "blue", 2, "rgba(0,255,0, 0.3)"); // 下右図：対角線部分だけの塗りつぶし不可
無効
drawCircle(x,y, r, linecolor, linewidth, fillcolor [,dash])
drawCircle(-1,-1, 2, "red", 4, "rgba(255,0,0, 0.3"); 中心(-1,-1)、半径2の円。円周は"red"色で太さ３。内部は"rgba(255,0,0, 0.3"色
drawEllipse(x,y, r1, r2, angle, linecolor, linewidth, fillcolor [,dash]);
x,y,； 楕円中心座標
r1,r2： 楕円のＸ方向、Ｙ方向の半径
angle： 回転角度、Ｘ軸右方向から反時計回り
x,y, r1,r2, angle, color, width, fillcolor [,dash]
drawEllipse( 1,2, 2,1, 0*Math.PI/180, "red", 4, "none"); // 枠のみ
drawEllipse(-2,0, 1,2, 0*Math.PI/180, "green", 4, "rgba(0,255,0, 0.2"); // 塗りつぶしあり
drawEllipse( 1,-1, 2,1, 30*Math.PI/180, "blue", 4, "none", [8,4]); // 30度反時計回り回転
drawArc(x,y, r, startAngle, endAngle, linecolor, linewidth, dash): x,y, r 中心座標と半径 startAngle, endAngle 円弧の始点と終点の角度
中心 半径 startAngle endAngle
drawArc(0,0, 2, 30*Math.PI/180, 120*Math.PI/180, "red", 6); // 赤 30→120
drawArc(0,0, 3, 120*Math.PI/180, 30*Math.PI/180, "blue", 6); // 青 120→30
drawArcArrow(x,y, r, startAngle, endAngle, linecolor, linewidth, arrow); x,y, r 中心座標と半径 startAngle, endAngle 円弧の始点と終点の角度 arrow 矢印位置 "end" (省略時解釈）終点、"start"（始点） "both"（両端）
x,y r 始点と終点 arrow 赤 -1,-1, 1.5, 30→100 "end" 緑 -1,-1, 2, 30→100 "start" 青 -1,-1, 2.5, 30→100 "both" 黒 -1,-1, 3, 30→300 省略=end 茶 -1,-1, 3.5, -30→ 30 省略=end
drawArcFan(x,y, r, startAngle, endAngle, type, linecolor, linewidth, [fillcolor, ribwidth. ribcolor]);
x,y,r // 中心の座標と半径
startAngle, endAngle // 円弧の始点・終戦の角度
type // "arc" 円弧、 "fan" 扇形（中心との三角形も含む）
ribwidth. ribcolor // リブの太さと色（arcのとき不要。fanでも円弧と同じなら不要）
（枠線に破線指定はできません）
ケース１ 図形の種類
左上（赤） 円弧（塗りつぶしなし）
右上（緑） 扇形（塗りつぶしなし）
左下（青） 円弧（塗りつぶしあり）
右下（黒） 扇形（塗りつぶしあり）リブの太さを変更
ケース２ 始点と終点の関係
左上（赤） ３０→１００（塗りつぶしなし）
右上（緑） ３０→３００（塗りつぶしなし）
左下（青） １００→３０（塗りつぶしあり）
右下（黒） －６０→３０（塗りつぶしあり）
ケース３ パラメータの指定
左上（赤） ribwidth. ribcolor 指定
右上（緑） ribwidth. ribcolor 省略 linewidth,linecolorと同じ
ケース４ 「凹型。塗りつぶしあり」での工夫
左上 完成図 これを作成するために、次の工夫をしている
右上 円弧を表示。鏃の部分の着色をする必要があるがかなり面倒
始点と終点の中間点を設けて、二つの凸型にすればよい
var middleAngle = (startAngle + endAngle) / 2;
if (startAngle > endAngle) middleAngle = middleAngle + Math.PI;
var xm = r*Math.cos(middleAngle) + x;
var ym = r*Math.sin(middleAngle) + y;
左下と右下になる。実際にはリブの線は塗りつぶしの色と同じにして見えなくする
リブの直線を表示する
drawBezie2(x0,y0, px,py, x1,y1, linecolor, linewidth); 始点 (x0,y0) 終点 (x1,y1) 制御点 (px.py)
drawBezie2(-2,-2, -1,1, 2,3, "red", 4);
直線 (-2,-2)-(2,3) を制御点(-1,1)で左上に引っ張る
drawBezie3(x0,y0, px1,py1, px2,py2, x1,y1, linecolor, linewidth[, dash]); 始点 (x0,y0) 終点 (x1,y1) 制御点 (px1.py1),(px2.py2)
drawBezie3(-2,-2, -1,1, 3,1, 2,3, "red", 4);
直線 (-2,-2)-(2,3) を制御点(-1,1)で左上に、(3,1)で右に引っ張る
drawText(text, x,y, position, color, font); text：表示する文字列 x,y, position: 文字列（矩形）のどの部分を(x.y)に合わせるか "middle,center" の形式（これが省略時解釈） 左右位置："end"（文字列の末尾）|"start"（先頭）|"center"（中央） 上下位置："top"（上部。(x,y)の下に表示）|"bottom"|"middle" 一方だけを指定することができる。両方とも指定しないときは "" とする。 font："16px sans-serif" の形式。CSSでの表示と同じ 単に 16 のように数値(fontsize)だけを与えると "px sans-serif" が付加される。
text x,y, position color font
drawText("end,top", -1,3, "end,top", "red", 14);
drawText("start,top", 1,3, "start,top", "red", 14);
drawText("end,middle", -1,2, "end,middle", "blue", 16);
drawText("start,middle", 1,2, "start,middle", "blue", 16);
drawText("end,botoom", -1,1, "end,bottom", "green", 20);
drawText("start,botoom", 1,1, "start,bottom", "green", 20);
drawText("center,top", -2,-1, "center,top", "red", 14);
drawText("center,middle",-2,-2, "center,middle", "blue", 16);
drawText("center,bottom",-2,-3, "center,bottom", "green", 20);
drawText("serif", 1,-1, "start,middle", "red", "20px serif");
drawText("Arial", 1,-2, "start,middle", "blue", "30px Arial");
drawText("MS 明朝", 1,-3, "start,middle", "green", "40px 'MS 明朝'");
function drawTextRotate1(text, x,y, tan, position, color, font);
text：表示する文字列
x0,y0：表示位置
tan：回転方向。y = tan*(x-x0) + y0
position: 文字列（矩形）のどの部分を(x0.y0)に合わせるか
"middle,center" の形式（これが省略時解釈）
左右位置："end"（文字列の末尾）|"start"（先頭）|"center"（中央）
上下位置："top"（上部。(x,y)の下に表示）|"bottom"|"middle"
一方だけを指定することができる。両方とも指定しないときは "" とする。
color：文字の色
font："16px sans-serif" の形式。CSSでの表示と同じ
単に 16 のように数値(fontsize)だけを与えると "px sans-serif" が付加される
ケース１ position を"center,middle"に固定、tan を変化、 ケース２ tan=0.3 に固定、position を変化
drawTextRotate2(text, x0,y0, x1,y1, position, color, font); text：表示する文字列 x0,y0, x1,y1：回転の角度を直線で与える 直線の中点が文字列の中点になる position: 文字列（矩形）のどの部分を(x.y)に合わせるか "over" 線の上部、"middle" 線の位置、"under" 線の下部 font："16px sans-serif" の形式。CSSでの表示と同じ 単に 16 のように数値(fontsize)だけを与えると "px sans-serif" が付加される
［図の説明］ ・図では、参考のために直線を表示した。矢印は(x1,y1)側 ・図では、すべて posicion="over" にしている。 "under" にすると線の反対側、"middle" にすると線に重なる。 ・文字列が上下反転する場合がある。それを避けるには x0 < x1 に設定すればよい。
drawImage(image, x,y); image：画像ファイルのＵＲＬ
x,y：画像左上の表示場所
drawImage("120x80.jpg", 0,1);
画像 "120x80.jpg" の左上端が (0,1) になるように表示
drawImageZPR(image, x,y, {オプション});
image // 表示する画像ファイルのＵＲＬ
x,y // 画像の左上端（位置調整で変更）が CANVAS に表示する位置
オプションと省略値
位置調整 : "左上", // 画像のこの位置を、画像左上x,画像左上yに設定する
画像幅 : 0, 画像高 : 0, // 指定すると画像をズームして表示。０のときはズームしない
回転位置 : "左上", // 回転するときの画像の位置（"中央", "左上", "左下", "右上", "右下"）
回転角度 : 0 // ラジアン、反時計回り。０のとき回転しない。
例０オプションなし。drawImageと同じ
drawImageZPR("120x80.jpg", 0,1, {} ); // {} が必要
例１画像の中心を(0,1)に
drawImageZPR("120x80.jpg", 0,1, {位置調整:"中央"} );
例２ズーム
drawImageZPR("120x80.jpg", 0,1, {画像幅:160, 画像高:120} );
例３回転（中心、３０°）
drawImageZPR("120x80.jpg", 0,1, {回転位置:"中央", 回転角度:30*Math.PI/180} );
例４例１・２．３の組合せ
drawImageZPR("120x80.jpg", 0,1, {位置調整:"中央", 画像幅:160, 画像高:120, 回転位置:"中央", 回転角度:30*Math.PI/180} );
全体の記述順序
ステップ１ setCanvasのcanvasの定義 cw.ch は必須
Ａタイプ：xmin 等も与える。setCanvas(CanvasID, fillcolor, cw,ch, xmin,xmax,ymin,ymax);
Ｂタイプ：cw,ch だけを与えて xmin 等を与えない。setCanvas(CanvasID, fillcolor, cw,ch);
ステップ２：グラフの作成（ここが当関数）
Ｂタイプでは、ここのオプションパラメータで xmin 等を与える。
複数の関数を表示するには、xmin 等が同一なので、Ａタイプにするほうがよい。
ステップ３：補助線や目盛りの表示
Ａタイプのときは、ステップ２と３が逆でもよい。
オプションパラメータ
省略時解釈は個々の関数説明に記述
オプション指定が不要な場合でも、空の {} を記述する。
{ xxmin:-4, xxmax:4. … } の形式で与える。記述順序は任意
関連している引数は、すべて与えるかすべて省略すること。その判断は「代表引数」で行っている
xxmin を与えたら、xxmax.yymin.yymax も与える。xxminが代表引数
代表引数 xfrom. 関連引数 xto
複数のグラフ xmin 等が同じときは次のように記述すればよい
ステップ２で複数のグラフ命令を指定する。異なる型のグラフでもよい。
setCanvas(CanvasID, fillcolor, cw,ch, xmin,xmax,ymin,ymax);
drawFx(…):
drawTxy(…):
同じ型では、複数のグラフを一つのグラフ命令で記述できる。
drawFx( [関数0, 関数0, …], …): 配列で与える。パラメータも配列で与えるものがある。
遅延(ibterval)
指定しないとグラフ全体が同時に表示される。
指定する（1000=1秒）と、グラフが x や t の変化に伴い伸びるように表示される。
（このとき、刻みは最小の値がすべてのグラフに適用される
drawFx(Fx, lineColor, lineWidth,
{ xxmin, xxmax, yymin, yymax, xfrom, xto, dx, interval } );
必須パラメタ
Fx: // スカラーまたは配列。y = F(x) の式を文字列で与える "x*(x-2)"
lineColor, lineWidth, //スカラーまたは配列。グラフの色、太さ
オプションパラメータ 不要なときも {} を与える
xxmin, xxmax, yymin, yymax, // スカラーのみ。表の範囲。xxminの省略時はグローバル変数の xmin などになる。
// xxmin に値を与えるときは他の項目にも値を与える必要がある。
xfrom, xto, // スカラーまたは配列。グラフの表示範囲。省略時は xxmin,xxmax
dx, // スカラーまたは配列。グラフ作成での刻み幅。省略時は (xto-xfrom)/100
interval // スカラーのみ。グラフが左から右に伸びるように表示される。
// これを与えると全てのグラフに最小の dx が適用される。
（配列項目をスカラーで与えると、すべてのグラフが同じになる。配列数が少ないと最後のものが適用される）
ケース１ xmin等をsetCanvasで与える。グラフは１本。オプションなし。
setCanvas("drawFxCanvas", "yellow", 400,400, -4,4, -4,4);
drawFx("x*(x-2)", "red", 4, {}); // オプションがないときも {} は必要
ケース２xmin等をdrawFxで与える。グラフは１本。オプションあり。
setCanvas("drawFxCanvas", "yellow", 400,400);
drawFx("x*(x-2)", "red", 4,
{xxmin:-3,xxmax:3, yymin:-2,yymax:4, // xmin 等を変更（グラフが拡大される）
xfrom:-1, xto:3, // グラフの計算や表示範囲の変更
dx:0.2, // 刻みを粗くした。スムーズな曲線にならない
interval:200 }); // 遅延表示
ケース３ 複数のグラフ
setCanvas("drawFxCanvas", "white", 400,400, -4,4, -4,4);
drawFx(["x*(x-2)", "x*(x+1)*(x-1)"], ["red","blue"], [6,1],
{ xfrom:[-1, -1.5], xto:[3, 1.5] });
配列記述形式：すべてのグラフに同じ値を与えるとき、次のように記述することができる。
スカラーで与える "red" xfrom:-1
配列の一部を与える ["red"] xfrom:[-1] （配列数が不足のときは最後の要素が繰り返される）
ケース４［参考］点 (0,0) 以外をベースにしてグラフを表示。グラフには無関係で補助線での対応
drawFx("(x-12)*(x-14)", "red", 4, // グラフはＸが大きい部分に特徴がある
{xxmin:8,xxmax:16, yymin:-2,yymax:6, // それに合わせて xmin等の範囲を変更
xfrom:10, xto:15, dx:0.1});
drawTextXYscale(xmin,xmax, 1, ymin,ymax, 1, "black", 16, // スケールも変える必要
10, // x=10 がＹ軸になる
-1); // y=-1 がＸ軸になる
ケース５ パラメタ変更での実験
⇒ 参照事例：陽関数のグラフ
drawTxy(Txy, lineColor, lineWidth, tmin,tmax,
{ xxmin, xxmax, yymin: yymax, dt } );
必須パラメータ
Txy // グラフが１組なら [Fx.Fy] のベクトル
// 複数組なら [ [Fx1,Fy1], [Fx2,Fy2],… ] のマトリックス
lineColor, lineWidth // グラフの色と線。グラフが１つならスカラー、複数なら配列で与える
tmin,tmax // 媒介変数 t の計算範囲。スカラーあるいは配列
オプションパラメータ
xxmin, xxmax, yymin: yymax // スカラー。表の範囲。省略時はグローバル変数の xmin などになる
// すべて与えるかすべて省略する、一部指定はできない。
dt // グラフ作成での刻み幅。スカラーあるいは配列。省略時は (tmax-tmin)/100
interval // スカラー。グラフ表示の遅延時間 1000=１秒
ケース１ xmin等をsetCanvasで与える。オプションなし。
setCanvas("drawTxyCanvas", "white", 400,400);
drawTxy(["Math.cos(t)", "Math.sin(3*t)"], // 関数は Fx と Fy のペアなので [ ] で囲む
"red", 4, 0, 2*Math.PI, {}); // オプションなしでも {} は必要
ケース２ xmin等をdrawFxで与える。オプションあり。
setCanvas("drawTxyCanvas", "white", 400,400);
drawTxy(["Math.cos(8*t)-Math.cos(t)",
"Math.sin(8*t)-Math.sin(t)"],
"red", 4, 0, 2*Math.PI,
{ xxmin:-3, xxmax:3, yymin:-3, yymax:3, dt:0.01, interval:10 } );
ケース３ 複数のグラフ
setCanvas("drawTxyCanvas", "white", 400,400, -2,2, -2,2);
drawTxy([ ["Math.cos(t)", "Math.sin(3*t)"],["t/2", "1/t"] ], // [ [Fx0,Fy0], [Fx1,Fy1],…] の形式
["red","blue"],
4, // [4, 4] としたのと同じ
[0, -2],
[2*Math.PI, 2], {});
ケース４ パラメタを変化させて結果のグラフで確認
⇒ 参照事例：媒介関数のグラフ
drawRt(Rt, lineColor, lineWidth, tmin, tmax,
{ xxmin, xxmax, yymin, yymax, dt, intarval });
必須パラメタ
Rt: // スカラーまたは配列。y = F(x) の式を文字列で与える
lineColor, lineWidth, // スカラーまたは配列。グラフの色、太さ
tmin, tmax, // スカラーまたは配列。開始・終了角度（ラジアン、反時計回り、tmin < tmax
オプションパラメータ 不要なときも {} を与える
xxmin, xxmax, yymin, yymax, // スカラーのみ。表の範囲。xxminの省略時はグローバル変数の xmin などになる。
// xxmin に値を与えるときは他の項目にも値を与える必要がある。
dt, // スカラーまたは配列。グラフ作成での刻み幅。省略時は (xto-xfrom)/100
interval=0 // スカラーのみ。グラフが左から右に伸びるように表示される。
// エラー：現在interval機能は機能していません！！！
（配列項目をスカラーで与えると、すべてのグラフが同じになる。配列数が少ないと最後のものが適用される）
ケース１ xmin等を事前に記述するとき
drawRt("Math.cos(2*t)", "red", 4, 0, 2*Math.PI, {});
ケース２ xmin等をdrawFxのパラメタで与えるとき
drawRt("2*Math.cos(t) + Math.cos(2*t)", "red", 4, 0, 2*Math.PI,
{xxmin:-1,xxmax:3, yymin:-2,yymax:2, dt:0.05});
ケース３ 複数のグラフ
setCanvas("drawRtCanvas", "white", 400,400, -1,3,-2,2);
drawRt(["Math.cos(2*t)","2*Math.cos(t) + Math.cos(2*t)"],
["red","blue"], 4, 0, 2*Math.PI,
{ dt:0.05 } );
ケース４ パラメータを変化して結果を表示する
⇒ 参照事例：極座標関数のグラフ
drawFxy(Fxy, lineColor, lineWidth,
{ xxmin, xxmax, yymin, yymax,
xfrom, xto, yfrom, yto,
dx, dy, eps, interval=0 }
) {
必須パラメータ
Fxy, // 配列あるいはスカラー。陰関数 Fxy(x,y)=0
lineColor, lineWidth, // 配列あるいはスカラー。グラフ（点）の色と太さ
オプションパラメータ
xxmin, xxmax, yymin, yymax, // スカラーのみ。表の範囲。省略時はグローバル変数の xmin などになる
xfrom, xto, yfrom, yto, // 配列あるいはスカラー。グラフの表示範囲。省略時は xxmin,xxmax
dx, dy, // スカラーのみ。グラフ作成での刻み幅。省略時は (xmax-xmin)/100
eps, // スカラーのみ。|Fxy|＜eps で０になったとする。省略時は 0.05
interval // スカラーのみ。遅延
次の方法でグラフにしているので、テスト以外での利用には適さない
for (var x=xfrom; x<=xto; x=x+dx) {
for (var y=yfrom; y<=yto; y=y+dy) {
|Fxy(x,y)| < eps のとき (x,y) に点を表示
}
}
効率を良くするために、xfrom などの指定により探索範囲を小さくする必要がある
dx,dy を大きくすると効率は良くなるが、点の間隔が広がる
eps を大きくすると太線になる。小さくすると点が表示されないことがある
ケース１ xmin等をsetCanvasで与える。オプションなし。
setCanvas("drawFxyCanvas", "white", 400,400, -2,2, -2,2); // xmin 等をここで与える。
drawFxy("x*x + y*y - x*y -1", "red", 4, {}); // オプションがないときも {} は必要
ケース２ xmin等をdrawFxyのパラメタで与える
setCanvas("drawFxyCanvas", "white", 400,400);
drawFxy("3*x*x*x + y*y*y -1", "red", 4,
{xxmin:-2,xxmax:2, yymin:-2,yymax:2,
xfrom:-1.5, xto:1.5, yfrom:-1.5, yto:1.5,
dx:0.02, dy:0.02,
eps:0.1,
interval:10} );
ケース３ 複数のグラフ
setCanvas("drawFxyCanvas", "white", 400,400, -2,2, -2,2);
drawFxy(["x*x + y*y - x*y -1","3*x*x*x + y*y*y -1"],
["red","blue"], [2,4],
{ xfrom:-1, xto:1,
yfrom:-1.5, yto:1.5,
dx:0.02, dy:0.02,
eps:0.05,
interval:10
} );
ケース４ パラメータを変化させて確認
⇒ 参照事例：陰関数のグラフ
drawZxy(Zxy, zmin, zmax, dz, lineColor, lineWidth,
{ xxmin, xxmax, yymin, yymax,
xfrom, xto, dx, yfrom, yto, dy.
eps,
legend }
) {
必須パラメータ
Zxy, // 陰関数 Zxy(x,y)=z のｚによる等高線
zmin,zmax,dz, // 等高線の高さ
lineColor, lineWidth, // 配列あるいはスカラー。ラフ（点）の色と太さ
// サイズは線数 (zmax-zmin)/zx+1 になるが、スカラーあるいは少ないときは
// 与えた色が繰り返される。
オプションパラメータ
xxmin, xxmax, yymin, yymax, // 表の範囲。省略時はグローバル変数の xmin などになる
xfrom, xto, dx, // グラフの表示範囲。省略時は xmin,xmax, (xmax-xmin)/100
yfrom, yto, dy,
eps, // |Zxy - z|＜eps で０になったとする。省略時は 0.05
legend // 凡例を表示する場所。HTML内に <div id="ｘｘｘ"></div> が必要
次の方法でグラフにしているので、テスト以外での利用には限界がある。
for (var x=xfrom; x<=xto; x=x+dx) {
for (var y=yfrom; y<=yto; y=y+dy) {
|Zxy(x,y) - 等高線の値| < eps のとき (x,y) に点を表示
}
}
適切な zmin, zmax, dz を与えるのは困難。試行錯誤する必要がある。
効率を良くするために、xfrom などの指定により探索範囲を小さくする必要がある。
dx,dy を大きくすると効率は良くなるが、点の間隔が広がる。
eps を大きくすると太線になる。小さくすると点が表示されないことがある。
ケース１ xmin等をsetCanvasで与える。オプションなし。
setCanvas("drawZxyCanvas", "white", 400,400, -2,2, -2,2); // xmin 等をここで与える。
drawZxy("x*x + y*y - x*y", ["red","green","blue"], 4, {}); // 色は３色の繰返し、太さはすべて同じ
ケース２ 一部のパラメタを指定
setCanvas("drawZxyCanvas", "white", 400,400, -2,2, -2,2); // xmin 等をここで与える。
drawZxy("x*x + y*y - x*y", 0.5, 2, 0.5, ["red","green","blue"], 4,
{ xfrom:-1, xto:1, // xの範囲を変更（左右が切れる）
dx:0.02, dy:0.02, // 刻みを細かく→連続した曲線に見える
eps:0.03, // 0判定を緩和→点が大きく（線が太く）
legend:"drawZxy凡例"} ); // 凡例を表示
ケース３ Zxy を変更して作成した模様
setCanvas("drawZxyCanvas", "white", 400,400, -4,4, -4,4);
drawZxy("Math.cos(x) + Math.sin(y)", -2, 2, 0.5, ["red","green","blue"], 4,
{ dx:0.01, dy:0.01,
eps:0.03,
legend:"drawZxy凡例"} );
ケース４ パラメータを変化させて確認
drawWuv(Wuv, umin, umax, du, uAngle, vmin, vmax, dv, vAngle,
{ xxmin, xxmax, yymin, yymax,
pointcolor, pointsize } );
必須パラメータ
Wuv. // w = Ｗ(u,v) の式 陽関数を想定
umin, umax, du, // uの計算範囲と刻み
vmin, vmax, dv,
uAngle, vAngle, // Ｕ軸、Ｖ軸の角度。Ｘ軸正方向から逆時計回り、ラジアン。Ｗ軸はＹ軸と一致
オプションパラメータ
xxmin, xxmax, yymin, yymax, // canvasのＸＹ座標系定義。省略時は xmin 等になる
pointcolor, // グラフは点の連続で表示。その点の色（説明後述）
pointsize // グラフは点の連続で表示。その点の大きさ。省略時は 1
ケース１ オプション指定なし ケース２ 一次元。４端点の色を指定 ケース３ 二次元。ｗの値により色を変える ケース４ 「二次元」に軸を加える
ケース５ 「二次元」に軸を加える パラメータを変化させて確認（軸も含む）
⇒ 参照事例：３次元グラフ
drawLineYscale(dy, linecolor, linewidth, zerocolor, zerowidth [,dash, y0]);
dy： 補助線の刻み幅
linecolor, linewidth： 補助線の色と太さ
zerocolor, zerowidth： y0軸の色と太さ
dash： 補助線細線指定。省略すると実線、実線でy0軸を指定するときは dash="" とする
y0： Ｘ軸に平行な y = y0 が軸線（太線）になる。省略すると y0=0 になる
ケース１ ymin=-4,ymax= 4、Ｘ軸を太線、実線 ケース２ ymin=-4,ymax= 4、Ｘ軸を太線、破線 ケース３ ymin=10,ymax=18、y=12を太線、実線 ケース４ ymin=10,ymax=18、y=12を太線、破線
drawLineXscale(dx, linecolor, linewidth, zerocolor, zerowidth [,dash, x0]);
dx： 補助線の刻み幅
linecolor, linewidth： 補助線の色と太さ
zerocolor, zerowidth： x=x0軸の色と太さ
dash： 補助線細線指定。省略すると実線、実線でy0軸を指定するときは dash="" とする
x0： Ｘ軸に垂直な x = x0 が軸線（太線）になる。省略すると x0=0 になる
ケース１ xmin=-4,xmax= 4、Ｙ軸を太線、実線 ケース２ xmin=-4,xmax= 4、Ｙ軸を太線、破線 ケース３ xmin=10,xmax=18、x=12を太線、実線 ケース４ xmin=10,xmax=18、x=12を太線、破線
drawTextXYscale(xfrom, xto, dx, yfrom, yto, dy [, color, font, x0, y0]);
xfrom,xto,dx： Ｘ軸の目盛。xfrom から xto まで dx 刻み
yfrom,yto,dy： Ｙ軸の目盛
（目盛りは、dx,sy の小数点以下桁数に合わせて四捨五入する））
color； 数字の色。省略あるいは""のとき black
font： 数字の太さ。"16px sans-serif"の形式
省略あるいは""のとき "12px sans-serif"
数値（12など）のとき "数値px sans-serif"
x0,y0： y=x0をＸ軸,x=y0をＹ軸として目盛りを付ける
xfrom,xto ymin,yman font x0 y0 ケース１ -4 4 -4 4 ケース２ -4 4 -4 4 16 ケース３ -4 4 -4 4 "12px fantasy" ケース４ 10 18 -4 4 "" 12 ケース５ 10 18 -4 4 "" 12 1
drawTextXscale(xfrom, xto, dx [, color, font, y0]) {
y0： Ｘ軸の平行線 y=y0 の線を軸とする
xfrom,xto,dx： Ｘ軸の目盛。xfrom から xto まで dx 刻み
（目盛りは、dx の小数点以下桁数に合わせて四捨五入する））
color； Ｘ軸の目盛の色。省略あるいは""のとき black
font： 数字の太さ。"16px sans-serif"の形式
省略あるいは""のとき "16px sans-serif"
数値（12など）のとき "数値px 16px sans-serif"
xfrom,xto dx color font y0 ケース１ -4 4 1 ケース２ -4 4 1 "red" 16 ケース３ -4 4 0.5 "green" "12px fantasy" ケース４ 10 18 1 "blue" 16 2
drawTextYscale(yfrom, yto, dy [, color, font, x0]) {
x0： Ｘ軸の平行線 y=x0 の線を軸とする
yfrom,yto,dy： Ｘ軸の目盛。yfrom から yto まで dy 刻み
（目盛りは、dy の小数点以下桁数に合わせて四捨五入する））
color； Ｘ軸の目盛の色。省略あるいは""のとき black
font： 数字の太さ。"16px sans-serif"の形式
省略あるいは""のとき "16px sans-serif"
数値（12など）のとき "数値px 16px sans-serif"
yfrom,yto dy color font x0 ケース１ -4 4 1 ケース２ -4 4 1 "red" 16 ケース３ -4 4 0.5 "green" "12px fantasy" ケース４ 10 18 1 "blue" 16 2
[step, fixed, point, list] = axisStepFixed(pmin, pmax);
pmin, pmax // 軸の範囲 xmin,xmax など
step // 補助線や目盛りの刻み幅
fixed // 目盛数値の小数点以下の桁数 p.toFixed(fixed) として用いる
point // 補助線や目盛りの数
list // 各 point のリスト（配列）
（注：listをキリのよい値にするため、pmin が左側にずらすことがある）
drawConCircle(x0,y0, rmin, rmax, dr, linecolor, linewidth, dash);
x0,y0： 中心点
rmin,rmax,dr： 補助線半径
点 (-1,1) を中心に半径を１から５まで１刻みの同心円を表示する
drawConCircle(-1,1, 1,5, 1, "gray", 1, [4.2]);
drawLineRad(x0,y0, dt, linecolor, linewidth, dash);
x0,y0： 中心点
dt： Ｘ軸右側を起点に反時計回り
点 (-1,1) を中心に３０度刻みに放射状の補助線を引く
drawLineRad(-1,1, 30*Math.PI/180, "gray", 1, [4.2]);
drawWuvAxis(umin, umax, du, uAngle, vmin, vmax, dv, vAngle, dw,
{ xxmin, xxmax, yymin, yymax,
uAxisColor, uAxisWidth, uScaleColor, uScaleFont, uLineColor, uLineWidth, uLineDash,
vAxisColor, vAxisWidth, vScaleColor, vScaleFont, vLineColor, vLineWidth, vLineDash,
wAxisColor, wAxisWidth, wScaleColor, wScaleFont
] );
（パラメータの意味は、後述「ケース３」の form を参照）
ケース１ オプションなし
setCanvas("drawWuvAxisCanvas", "white", 400,400, -4,4, -4,4);
drawWuvAxis(-2, 2, 1, 30*Math.PI/180, -2, 2, 1, 135*Math.PI/180, 1, {} );
ケース２ オプションなし
setCanvas("drawWuvAxisCanvas", "white", 400,400, -4,4, -4,4);
drawWuvAxis(-2, 2, 1, 30*Math.PI/180, -2, 2, 1, 135*Math.PI/180, 1,
{ uAxisColor:"red", vAxisColor:"green", wAxisColor:"blue"} ); // 軸の色
ケース３ パラメタ変更による確認
var [x, y] = toXY(w,h [,ccw,cch, xxmin,xxmax, yymin, yymax]);
w,h： ＷＨ系での座標
ccw,cch：グローバル変数の cw,ch に相当する値
xxmin等：グローバル変数の xmin等 に相当する値
[ ] はすべて省略・指定のいずれかであり、一部を指定することはできない
[ ] の値を省略したときは、現canvasでの値が用いられる
[ ] の値を指定してもグローバル変数の値は変化しない
変換式
x = (xxmax-xxmin)*w/ccw + xxmin;
y = (yymin-yymax)*h/cch + yymax;
事前にグローバル変数 cw=400; ch=400; xmin=-4; xmax=4; ymin=-4; ymax=4: が指定されている ケース１ var [x,y] = toXY(100,200); ケース２ var [x,y] = toXY(20,30, 100,100, -10,10, -10, 10); ケース３
var [w, h] = toWH(x,y [,ccw,cch, xxmin,xxmax, yymin, yymax]);
x,y： ＸＹ系での座標
ccw,cch：グローバル変数の cw,ch に相当する値
xxmin等：グローバル変数の xmin等 に相当する値
[ ] はすべて省略・指定のいずれかであり、一部を指定することはできない
[ ] の値を省略したときは、現canvasでの値が用いられる
[ ] の値を指定してもグローバル変数の値は変化しない
変換式
w = Math.round((x-xxmin)/(xxmax-xxmin)*ccw);
h = Math.round((yymax-y)/(yymax-yymin)*cch);
事前にグローバル変数 cw=400; ch=400; xmin=-4; xmax=4; ymin=-4; ymax=4: が指定されている ケース１ var [w,h] = toWH(-2,0); ケース２ var [w,h] = toWH(-6,4, 100,100, -10,10, -10, 10); ケース３
[red, green, blue, alfa] = color3a(color); color は "#rggbb","rgb(r,g,b)", "fgba(r,g.b.a)", "red" の形式
⇒参照：getColor 色見本
[HEX, a] = colorHEX([red, green, blue, alfa]); HEX は "#rrggbb" の形式, a は透明度
⇒参照：getColor 色見本
var rad = toRad(deg);
ケース１ var rad = toRad(90); ケース２ 下の form に入力
var deg = toDeg(rad);
ケース１ var deg = toDeg(1.571); ケース２ 下の form に入力
var [x,y] = rotatePoint(x0,y0, x1,y1, angle [,ccw,cch, xxmin,xxmax, yymin, yymax]); 点Ｐ (x0,y0) を中心に、点Ｑ(x1,y1) を反時計回りに angleラジアン回転した点Ｒの座標を求める
ccw,cch：グローバル変数の cw,ch に相当する値 xxmin等：グローバル変数の xmin等 に相当する値 [ ] はすべて省略・指定のいずれかであり、一部を指定することはできない [ ] の値を省略したときは、現canvasでの値が用いられる [ ] の値を指定してもグローバル変数の値は変化しない
変換式
x = (x1-x0)*Math.cos(angle) + (y1-y0)*Math.sin(angle) + x0;
y = - (x1-x0)*Math.sin(angle) + (y1-y0)*Math.cos(angle) + y0;
事前にグローバル変数 cw=400; ch=400; xmin=-4; xmax=4; ymin=-4; ymax=4: が指定されている ケース１ [ ] 省略 var [x,y] = rotatePoint(1,2, 3,3, 60*Math.PI/180); ケース２ [ ] 指定 var [x,y] = rotatePoint(1,2, 3,3, 60*Math.PI/180, 400,400, -4,4, -4,4); ケース３ 下の form 指定
var [x, y] = symmetryPoint(x0,y0, x1,y1, xa,ya [,ccw,cch, xxmin,xxmax, yymin, yymax]); 直線 (x0,y0)-(x1,y1) に関して点 (xa, ya) の対称点 (x,y) の座標を求める ccw,cch：グローバル変数の cw,ch に相当する値 xxmin等：グローバル変数の xmin等 に相当する値 [ ] はすべて省略・指定のいずれかであり、一部を指定することはできない [ ] の値を省略したときは、現canvasでの値が用いられる [ ] の値を指定してもグローバル変数の値は変化しない
直線 (x0,y0)-(x1,y1) の勾配を p = (y1-y0)/(x1-x0) とすると 直線 (x0,y0)-(x1,y1) の式： y = p(x-x0) + y0 これに直交し点 (xa,ya) を通る式： y= (-1/p)(x-xc) + ya この交点 (xc,yc) は xc = (xa/p + px0 + ya- y0) / (p + 1/p) yc = p(xc-x0) + y0 (xc,yc) は (xa,ya)-(x,y) の中点なので、 x = 2xc - xa y = 2yc - ya
事前にグローバル変数 cw=400; ch=400; xmin=-4; xmax=4; ymin=-4; ymax=4: が指定されている ケース１ [ ] 省略 var [x,y] = symmetryPoint(1,2, 3,3, 2,1); ケース２ [ ] 指定 var [x,y] = symmetryPoint(1,2, 3,3, 2,1, 400,400, -4,4, -4,4); ケース３ 下の form 指定
[x,y] = UVWtoXY(u,v,w, au, av);
u,v,w // ３次元座標系（ＵＶＷ座標系での位置）
au, av // ｕ軸、ｖ軸のＸ軸正方向からの逆時計回り角度（ラジアン）、Ｗ軸はＹ軸と一致
x,y // ＸＹ座標系での位置
公式
var x = u*Math.cos(au) + v*Math.cos(av);
var y = u*Math.sin(au) + v*Math.sin(av) + w;
clickCanvas(canvas名, 結果表示場所);
既に作成されているcanvasの画面をクリックすると、その位置と色を表示する。 対象 canvas は HTML に表示されているものなら、直前に作成したものでなくてもよい。 その結果を呼出側に変数としてとりだすことはできない。 HTML に <div id="clickCanvas結果表示場所"></div> と記述しておく必要がある（名称は任意）。 出力形式 w=118, h=122, x=-1.64, y=1.56, r=255, g=170, b=0, a=0.8。 クリックするたびに結果が追加される。 クリック効果を打ち切るとき HTML に次のボタンを設定しておく。このボタンをクリックすると打ち切られる。 <button onClick="clickCanvas('終了')">クリック終了</button> いったん打ち切った効果を再開することはできない。