スタートページ＞ Javascript

xycoordinate.js 使用解説書
（１）基本機能

xycoordinate.jsの概要

目的

• canvas では、左上端を (0, 0) 右下端を (cw,ch) とするＷ－Ｈ座標系になっています。ところが数学的な図形を表示するには、下図のようなＸ－Ｙ座標系のほうが便利です。xycoordinate.jsでは、canvasを仮想的なＸ-Ｙ座標系にしています。
• xycoordinate.js には「基本機能」と「数式グラフ」の関数があります。「数式グラフ」は、y=f(x), f(x,y)=0, r=f(t) などの数式を与えてグラフを作成するための関数です。これに関しては（２）で扱います。
• Javascript の canvasAPI では、汎用性を重視して、細かな要素を単位にしていますが、手軽に描画するには、「直線を引く」などの操作単位の関数のほうが便利です。xycoordinate.jsでは、よく用いられる機能関数を提供します。
• canvas 全般に関する説明や応用例は、ＣＡＮＶＡＳの基礎（目次）からリンクしています。

著作権等

• 著作権は私（木暮）に帰属しますが、xycoordinate.jsの全体あるいは一部をコピーしてご利用することは自由です。ご連絡の必要もありません。
• 自分のＷｅｂページ作成過程で追加、更新した、あくまでも個人用ツールですので、エラーもあり品質保証はしません。処理効率などは考慮していません。

構成

xycoordinate.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 があります。
これら赤字の変数は、グローバル変数として定義しています。

通常の場合、呼出側のjavascriptは、次のような構成になります。

　　　function xxx() { 
　　　　　cw = 400; ch = 400; 
　　　　　setCanvas("canvas1", "white"); 
　　　　　clearScreen("white"); 
　　　　　xmin = -4; xmax=4; ymin=-4; ymax=4; 
　　　　　：
　　　　　： 各xycoordinate.js関数
　　　　　：
　　　}

関数

パラメータ

• x0, y1, ...color, ...width など容易に判断できるものは省略します。
  ...width はピクセル単位です。
• dash は破線指定で省略可能です。省略すると実線になります。
  ctx.setLineDash([,,,]) の [ ] を指定します。
  破線の塗りと余白の幅を配列で交互に指定します。
  　　[4,2]　→　■■■■□□■■■■□□■■■■□□
  　　[6,2, 2,2]<　→　■■■■■■□□■■□□■■■■■■□□■■□□
• fillcolor のように省略はできないが「指定しない」ときは "none" としてください。
• その他、関数固有のものは、該当関数で説明します。

角度

Ｘ軸右方向から反時計回りでラジアンを単位にしています。
０点と点(x,y)の角度は次のとおりです。
(x,y)=角度(°)
(1,0)=0.00(0°)
(1,1)=0.79(45°)
(0,1)=1.57(90°)
(-1,1)=2.36(135°)
(-1,0)=3.14(180°)
(-1,-1)=-2.36(-135°)
(0,-1)=-1.57(-90°)
(1,-1)=-0.79(-45°)

関数

［実行］をクリックすると、右に呼出側javascriptと該当関数のxycoordinate.js、その結果の canvas が表示されます。

• Canvasのクリア（１つの色で塗りつぶす） 実行
  clearScreen(fillcolor)
  clearScreen("white");
• 点 実行
  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"色、太さ４の実線
• 矢印付きの直線 実行
  drawLineArrow(x0,y0, x1,y1, linecolor,linewidth, arrow [,dash])
  arrow = "end" （省略時）点(x1,y1)に付ける 、"start" 点(x0,y0)、"both" 両点
  使用関数：drawLine,
• 補助線（Ｙ軸、水平線） 実行
  drawLineYscale(dy, linecolor, linewidth, zerocolor, zerowidth [,dash])
  Ｘ軸を基準にdy刻みに水平線を引く。Ｘ軸はzerocolor, zerowidthで引く
  drawLineYscale(1, "gray", 1, "black", 4);
  使用関数：drawLine
• 補助線（Ｘ軸、垂直線） 実行
  drawLineXscale(dx, linecolor, linewidth, zerocolor, zerowidth [,dash])
  Ｙ軸を基準にdx刻みに垂直線を引く。Ｙ軸はzerocolor, zerowidthで引く
  drawLineXscale(1, "gray", 1, "black", 4);
  使用関数：drawLine
• 長方形 実行
  drawRect(x0,y0, x1,y1, linecolor, linewidth, fillcolor [,dash])
• 三角形 実行
  drawTri(x0,y0, x1,y1, x2,y2, linecolor, linewidth, fillcolor [,dash])
  drawTri(-1, -1, 1, 2, 3, -0, "blue", 4, "yellow");
  ３点()、()、()を頂点とする三角形。枠線は"blue"色で太さ３．内部は"yellow"色
• 多角形 実行
  drawPolygon(xyarray, linecolor, linewidth, fillcolor [,dash])
  xyarrayは各頂点(x,y)の配列。[ [x0,y0],[x1,y1],…,[xn,yn] ]
• 正多角形 実行
  drawRegularPolygon(n, x,y, r, base, type, linecolor, linewidth, fillcolor [,dash])
  base：0(円中心の下が底辺)| 1(円中心の下が頂点)
  type：0(周辺のみ表示) | 1(対角線だけ表示) | 2(周辺と対角線を表示)
  対角線部分だけの塗りつぶしはできない
• 円 実行
  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：回転、Ｘ軸右方向から反時計回り、単位ラジアン
  drawEllipse(1,-1, 2,1, 45*Math.PI/180, "blue", 4, "none", [8,4]);
  中心(1,-1)。Ｘ方向半径２、Ｙ方向半径１。４５°回転。線色blue、太さ４、点線。塗りつぶしなし
• 円弧 実行
  drawArc(x,y, r, startAngle, endAngle, wize, linecolor, linewidth [,dash])
  水平線正方向を起点。wize=true(反時計回り) | false（時計回り）
  drawArc(0,0, 1, Math.PI/180+15, Math.PI/180*60, true, "red", 2);
  中心(0,0)、半径1の円、15°から60°までの円弧。
• 矢印付き円弧 実行
  drawArcArrow(x,y, r, startAngle, endAngle, linecolor, linewidth, arrow [,dash])
  arrow = "end" (省略時解釈）endAngle点、start" startAngle点、"both" 両方
  使用関数：drawArc, drawLine
• 扇形 実行
  drawArcFan(x,y, r, startAngle, endAngle, linecolor, linewidth, fillcolor)
  機能限界：扇角度が１８０°を越えると余計な部分も着色されます。
  その場合は、中間角=(startAngle+endAngle)/2 で2つに分け
  　drawArcFan(x,y, r, startAngle, 中間角, "rgba(0,0,0,0)", 1, "red"); 透明な枠線
  　drawArcFan(x,y, r, 中間角, endAngle,, "rgba(0,0,0,0)", 1, "red");
  　drawArcFan(x,y, r, startAngle, endAngle, linecolor, linewidth, "none"); 枠線だけ
  とすることで解決できます。
• 文字列 実行
  drawText(text, x,y, position, color, font)
  position: 文字列（長方形）のどの部分を(x.y)に合わせるか
  　"middle,center" の形式（これが省略時解釈）
  　左右位置："end"（文字列の末尾）|"start"（先頭）|"center"（中央）
  　上下位置："top"（上部。(x,y)の下に表示）|"bottom"|"middle"
  　一方だけを指定することができる。両方とも指定しないときは "" とする。
  font："16px sans-serif" の形式。CSSでの表示と同じ
  　単に 16 のように数値(fontsize)だけを与えると "px sans-serif" が付加される。
• 文字列の回転 実行
  drawTextRotate(text, x0,y0, x1,y1, position, color, font)
  直線(x0,y0)-(x1,y1)の中点個所に、文字列textを、直線の角度に合わせて表示する（直線は引かない）。
  position: 文字列と線の関係 　"over" の上部、"middle" 線の位置、"under" 線の下部
  font："16px sans-serif" の形式。CSSでの表示と同じ
  　単に 16 のように数値(fontsize)だけを与えると "px sans-serif" が付加される。
  ［図の説明］ ・図では、参考のために直線を表示した。矢印は(x1,y1)側
  ・図では、すべて posicion="over" にしている。"under" にすると線の反対側、"middle" にすると線に重なる。
  ・文字列が上下反転する場合がある。それを避けるには x0 < x1 に設定すればよい。
• 軸目盛数値（ＸＹ両軸） 実行
  drawTextXYscale(xfrom, xto, dx, yfrom, yto, dy, color, font)
  Ｘ軸の下、ｙ軸の左に表示する。
  xfrom, xto, dx　数値表示の最小値、最大値、刻み幅
  drawTextXYscale(-4, 4, 1, -4,4, 1, "black", 16);
• 軸目盛数値（Ｘ軸のみ） 実行
  drawTextXscale(xfrom, xto, dx, color, font)
  drawTextXscale(-4, 4, 1, "black", 16);
• 軸目盛数値（Ｙ軸のみ） 実行
  drawTextYscale(yfrom, yto, dy, color, font)
• 画像 実行
  drawImage(image, x,y)
  image：画像ファイルのＵＲＬ
• 画像の回転表示 実行
  drawImageRotate(image, x,y, angle)
  url：画像ファイルのＵＲＬ
  x, y：画像の中心位置（ここを中心に回転）
  angle：Ｘ軸正方向から反時計回り、単位ラジアン

支援関数

• canvasの保存 実行
  backupCanvas()
  canvasの全ピクセルをグローバル変数canvasImageDataに保存
• canvasの復元 実行
  restoreCanvas()
  先に保存したcanvasImageDataでcanvasを復元表示
• クリック点の座標、色の取得 実行
  clickCanvas(結果表示場所)
  HTMLに <div id="結果表示場所"></div> が必要です。
• Ｗ－Ｈ系座標→Ｘ－Ｙ系座標変換 rtn = WHtoXY(w,h);　x = rtn.x;　y = rtn.y;
  
  　　w= 　h= （結果はCanvasの下）
  変換式： x = (xmax-xmin)*w/cw + xmin;
  　　　　 y = (ymin-ymax)*h/ch + ymax;
• Ｘ－Ｙ系座標→Ｗ－Ｈ系座標変換 rtn = XYtoWH(x,y);　w = rtn.w;　h = rtn.h;
  
  　　x= 　y= （結果はCanvasの下）
  変換式： w = Math.round((x-xmin)/(xmax-xmin)*cw);
  　　　　 h = Math.round((ymax-y)/(ymax-ymin)*ch);
• 回転（角度を与える） 実行
  rtn = rotateByAngle(x0,y0, x1,y1, t);
  　　x = rtn.x;　　y = rtn.y;
  直線Ｐ(x0,y0)ーＱ(x1,y1) をＰを中心として角度ｔ回転したときの、Ｑの新座標Ｒ(x,y)を求める。
  公式：　x = (x1-x0)*Math.cos(t) - (y1-y0)*Math.sin(t) + x0;
  　　　　y = (x1-x0)*Math.sin(t) + (y1-y0)*Math.cos(t) + y0;
• 軸対称 実行
  rtn = symmetryPoint(xc,yc, x0,y0, θ);
  　　x = rtn.x;　　y = rtn.y;
  点Ｐ(xc, yc) を通り傾き tan(θ) の直線に関して、点Ｑ(x0, y0) の対称点Ｒ(x, y) の座標を求める
  公式：　v = -(x0-xc)sin(θ) + (y0-yc)cos(θ)
  　　　　x =　2v*sin(θ) + x0
  　　　　y = -2v*cos(θ) + y0