HandyGraphic.js: handyGraphic.Graphic

座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して円弧を描画． 円弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

角度は， 0 ~ 360 で表される整数を使います．

• x <Number>

  円弧の中心のx座標

• y <Number>

  円弧の中心のy座標

• r <Number>

  円弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

Example

Hg.Arc(10, 10, 5, 0, 135); 

座標(x, y) を左下隅とする幅w，高さhの長方形を描画． 左下隅の座標ははウィンドウの外部の点でも構いません．

• x <Number>

  左下隅のx座標

• y <Number>

  左下隅のy座標

• w <Number>

  幅

• r <Number>

  高さ

Example

Hg.Box(10, 10, 3, 5); // (10, 10) を左下隅とする幅3，高さ5の長方形を描画

座標(x, y) を左下隅とする幅w，高さhの塗りつぶされた長方形を描画． 左下隅の座標はウィンドウの外部の点でも構いません．

引数 stroke が 0 の場合は周囲に長方形を描きません． 0 以外の値(例えば 1)の場合，他の線図形と同じ太さ，同じ色の線で長方形を描きます．

• x <Number>

  左下隅のx座標

• y <Number>

  左下隅のy座標

• w <Number>

  幅

• r <Number>

  高さ

• stroke <Number>

  周囲を描くかどうか

Example

Hg.BoxFill(10, 10, 3, 5); // (10, 10) を左下隅とする幅3，高さ5の塗りつぶされた長方形を描画
Hg.BoxFill(10, 10, 3, 5, 0); // strokeを指定しない or =0 なら円周は描画されない
Hg.BoxFill(10, 10, 3, 5, 1); // 円周を描画する

座標(x, y) を中心とした半径rの円を描画． 中心点はウィンドウの外部の点でも構いません．

• x <Number>

  中心のx座標

• y <Number>

  中心のy座標

• r <Number>

  半径

Example

Hg.Circle(10, 10, 5); // (10, 10) を中心とした半径5の円を描画

座標(x, y) を中心とした半径rの塗りつぶされた円を描画． 中心点はウィンドウの外部の点でも構いません．

引数 stroke が 0 の場合は円周を描きません． 0 以外の値(例えば 1)の場合，他の線と同じ太さ，同じ色の線で円周を描きます．

• x <Number>

  中心のx座標

• y <Number>

  中心のy座標

• r <Number>

  半径

• stroke <Number>

  円周を描くかどうか

Example

Hg.CircleFill(10, 10, 5); // (10, 10) を中心とした半径5の塗りつぶされた円を描画
Hg.CircleFill(10, 10, 5, 0); // strokeを指定しない or =0 なら円周は描画されない
Hg.CircleFill(10, 10, 5, 1); // 円周を描画する

ウィンドウ内に書かれたすべての図形や文字を消去する．

Example

Hg.Clear(); // ウィンドウの初期化

座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して扇型の孤を描画． 扇型の弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

角度は， 0 ~ 360 で表される整数を使います．

• x <Number>

  弧の中心のx座標

• y <Number>

  弧の中心のy座標

• r <Number>

  弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

Example

Hg.Fan(10, 10, 5, 0, 135); 

座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して塗りつぶされた扇型を描画． 扇型の弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

引数 stroke が 0 の場合は周囲の線を描きません． 角度は， 0 ~ 360 で表される整数を使います．

• x <Number>

  弧の中心のx座標

• y <Number>

  弧の中心のy座標

• r <Number>

  弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

• stroke <Number>

  周囲を描くかどうか

Example

Hg.FanFill(10, 10, 5, 0, 135); // 円周なし
Hg.FanFill(10, 10, 5, 0, 135, 0); // 円周なし
Hg.FanFill(10, 10, 5, 0, 135, 1); // 円周あり

0 ~ 255 の値で指定された数値を元に，白から黒までの範囲で色を作成する． 0が黒，255が白です．引数の数値は0 <= g <= 255 の整数で指定する．

• g <Number>

  グレーの濃度を示す整数

Example

String color = Hg.Gray(0); // 黒色
HgSetColor(color); // 黒色に変更

HgSetColor(Hg.Gray(255)); // 白色に変更

白黒の半透明色を作成する． 0が黒，255が白です．引数の数値は0 <= g <= 255 の整数で指定する． アルファ値は0.0 <= a <= 1.0 の範囲内の値で指定する．

• g <Number>

  グレーの濃度を示す整数

• a <Number>

  アルファ値

Example

String color = Hg.GrayA(0, 0.5); // 半透明の黒色
HgSetColor(color);

HgSetColor(Hg.GrayA(255, 0.5)); // 半透明の白色に変更

(x0, y0) と (x1, y1) を結ぶ線分を描画． これらの点はウィンドウの外部の点でも構いません．

• x0 <Number>

  始点のx座標

• y0 <Number>

  始点のy座標

• x1 <Number>

  終点のx座標

• y0 <Number>

  終点のy座標

Example

Hg.Line(100, 100, 300, 300); // (100, 100) と (300, 300) を結ぶ線分を描画

描画するウィンドウを作成する． 実行するたび，参照しているWindowオブジェクト(カレントウィンドウ)が変更される． canvasId を指定しない場合は，#canvasが指定されているものとしてウィンドウを動作します．

• w <Number>

  ウィンドウの幅

• h <Number>

  ウィンドウの高さ

• canvasId <String>

  canvasのId

Example

var win1 = Hg.Open(400, 400); // 400x400のウィンドウを作成
var win2 = Hg.Open(300, 300, "canvas2"); // カレントウィンドウがwin2に変更される

指定された座標群 x，y を結ぶような多角形を描画． 最初の点と最後の点の間が結ばれます．

• n <Number>

  頂点数

• x <Array>

  x座標の配列

• y <Array>

  y座標の配列

Example

var x = [x0, x1, x2, x3, x4];
var y = [y0, y1, y2, y3, y4];

Hg.Polygon(5, x, y);

指定された座標群 x，y を結ぶような塗りつぶされた多角形を描画． 最初の点と最後の点の間が結ばれます．

引数 stroke が 0 の場合は周囲の線を描きません．

• n <Number>

  頂点数

• x <Array>

  x座標の配列

• y <Array>

  y座標の配列

• stroke <Number>

  周囲を描くかどうか

Example

var x = [x0, x1, x2, x3, x4];
var y = [y0, y1, y2, y3, y4];

Hg.PolygonFill(5, x, y); // 円周なし
Hg.PolygonFill(5, x, y, 0); // 円周なし
Hg.PolygonFill(5, x, y, 1); // 円周あり

赤，緑，青の三原色の数値を元に色を作成する． 引数の数値は 0 <= r, g, b <= 255 の整数で指定する

• r <Number>

  赤の濃度を示す整数

• g <Number>

  緑の濃度を示す整数

• b <Number>

  青の濃度を示す整数

Example

String color = Hg.RGB(255, 255, 0); // 黄色
HgSetColor(color);

HgSetColor(Hg.RGB(0, 255, 255)); // シアンに変更

透明度を指定して，赤，緑，青の三原色の数値を元にを作成する． 引数の数値は 0 <= r, g, b <= 255 の整数で指定する． アルファ値は 0.0 <= a <= 1.0 の範囲内の値で指定する．

• r <Number>

  赤の濃度を示す整数

• g <Number>

  緑の濃度を示す整数

• b <Number>

  青の濃度を示す整数

• a <Number>

  アルファ値

Example

String color = Hg.RGB(255, 255, 0, 0.5); // 半透明な黄色
HgSetColor(color);

HgSetColor(Hg.RGB(0, 255, 255, 0.5)); // 半透明なシアンに変更

描画する線の色を変更する． いったん色を指定すると，別の色を指定するまで同じ色が使われます．一度も指定しない場合は黒で描画する． colorに指定する色はCSSで指定するフォーマットに対応

• color <String>

  線の色を表す文字列

Example

Hg.SetColor("red"); // 色名で指定
Hg.SetColor("rgb(192, 80, 77)"); // rgb(r, g, b) 指定
Hg.SetColor("#FF0000"); // カラーコード指定
Hg.SetColor(Hg.RGB(192, 80, 77); // RGBメソッドを使用

図形の塗りつぶす色を変更する． colorに指定する色はCSSで指定するフォーマットに対応． 別の色を指定するまで同じ色が使われます．一度も指定しない場合は白で塗りつぶされます．

• color <String>

  塗りつぶす色を表す文字列

Example

Hg.SetFillColor("red"); // 色名で指定
Hg.SetFillColor("rgb(192, 80, 77)"); // rgb(r, g, b) 指定
Hg.SetFillColor("#FF0000"); // カラーコード指定
Hg.SetFillColor(Hg.RGB(192, 80, 77); // RGBメソッドを使用

文字列を描画する場合のフォントと大きさを指定する． いったん指定されると，別の指定があるまで同じ字体と大きさが使われる．

• x <Number>

  x座標

• y <Number>

  y座標

• 表示する文字列 <String>

Example

Hg.SetFont("sans-serif", 12);

描画する線の太さを変更する． 指定できるのは0より大きい数値のみで，それ以外の値を指定しても無視されます．

• t <Number>

  線の太さを示す数値

Example

Hg.SetWidth(1); // 線の太さを1に指定（デフォルト値）
Hg.SetWidth(3); // 線の太さを3に指定

座標(x, y)を左下隅として，指定された文字列を描きます． 左下隅の座標はウィンドウの外部の点でも構いません．

• x <Number>

  x座標

• y <Number>

  y座標

• 表示する文字列 <String>

Example

Hg.Text(10, 10, "Hello World");

指定したウィンドウに 座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して円弧を描画． 円弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

角度は， 0 ~ 360 で表される整数を使います．

• win <Window>

  指定するウィンドウ

• x <Number>

  円弧の中心のx座標

• y <Number>

  円弧の中心のy座標

• r <Number>

  円弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

Example

Hg.WArc(win1, 10, 10, 5, 0, 135); 
Hg.WArc(win2, 10, 10, 5, 0, 135); 

指定したウィンドウに 座標(x, y) を左下隅とする幅w，高さhの長方形を描画． 左下隅の座標ははウィンドウの外部の点でも構いません．

• win <Window>

  指定するウィンドウ

• x <Number>

  左下隅のx座標

• y <Number>

  左下隅のy座標

• w <Number>

  幅

• r <Number>

  高さ

Example

Hg.WBox(win1, 10, 10, 3, 5);
Hg.WBox(win2, 10, 10, 3, 5);

指定したウィンドウに 座標(x, y) を左下隅とする幅w，高さhの塗りつぶされた長方形を描画． 左下隅の座標はウィンドウの外部の点でも構いません．

引数 stroke が 0 の場合は周囲に長方形を描きません． 0 以外の値(例えば 1)の場合，他の線図形と同じ太さ，同じ色の線で長方形を描きます．

• win <Window>

  指定するウィンドウ

• x <Number>

  左下隅のx座標

• y <Number>

  左下隅のy座標

• w <Number>

  幅

• r <Number>

  高さ

• stroke <Number>

  周囲を描くかどうか

Example

Hg.WBoxFill(win1, 10, 10, 3, 5);
Hg.WBoxFill(win2, 10, 10, 3, 5, 0);
Hg.WBoxFill(win2, 10, 10, 3, 5, 1);

指定したウィンドウに 座標(x, y) を中心とした半径rの円を描画． 中心点はウィンドウの外部の点でも構いません．

• win <Window>

  指定するウィンドウ

• x <Number>

  中心のx座標

• y <Number>

  中心のy座標

• r <Number>

  半径

Example

Hg.WCircle(win1, 10, 10, 5);
Hg.WCircle(win2, 10, 10, 5);

指定したウィンドウに 座標(x, y) を中心とした半径rの塗りつぶされた円を描画． 中心点はウィンドウの外部の点でも構いません．

引数 stroke が 0 の場合は円周を描きません． 0 以外の値(例えば 1)の場合，他の線と同じ太さ，同じ色の線で円周を描きます．

• win <Window>

  指定するウィンドウ

• x <Number>

  中心のx座標

• y <Number>

  中心のy座標

• r <Number>

  半径

• stroke <Number>

  円周を描くかどうか

Example

Hg.CircleFill(win1, 10, 10, 5);
Hg.CircleFill(win2, 10, 10, 5, 0);
Hg.CircleFill(win2, 10, 10, 5, 1);

指定したウィンドウ内に書かれたすべての図形や文字を消去する．

• win <Window>

  指定するウィンドウ

Example

Hg.WClear(win1); // win1ウィンドウの初期化
Hg.WClear(win2); // win2ウィンドウの初期化

指定したウィンドウに 座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して扇型の孤を描画． 扇型の弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

角度は， 0 ~ 360 で表される整数を使います．

• win <Window>

  指定するウィンドウ

• x <Number>

  弧の中心のx座標

• y <Number>

  弧の中心のy座標

• r <Number>

  弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

Example

Hg.WFan(win1, 10, 10, 5, 0, 135); 
Hg.WFan(win2, 10, 10, 5, 0, 135); 

指定したウィンドウに 座標(x, y) を中心とした半径rの円について，開始角度 a0 と終了角度 a1 を指定して塗りつぶされた扇型を描画． 扇型の弧は始点角度から終了角度までを反時計回りに結びます．中心座標はウィンドウの外部でも良い．

引数 stroke が 0 の場合は周囲の線を描きません． 角度は， 0 ~ 360 で表される整数を使います．

• win <Window>

  指定するウィンドウ

• x <Number>

  弧の中心のx座標

• y <Number>

  弧の中心のy座標

• r <Number>

  弧の半径

• a0 <Number>

  開始角度

• a1 <Number>

  終了角度

• stroke <Number>

  周囲を描くかどうか

Example

Hg.WFanFill(win1, 10, 10, 5, 0, 135);
Hg.WFanFill(win2, 10, 10, 5, 0, 135, 0);
Hg.WFanFill(win2, 10, 10, 5, 0, 135, 1);

指定したウィンドウに (x0, y0) と (x1, y1) を結ぶ線分を描画． これらの点はウィンドウの外部の点でも構いません．

• win <Window>

  指定するウィンドウ

• x0 <Number>

  始点のx座標

• y0 <Number>

  始点のy座標

• x1 <Number>

  終点のx座標

• y0 <Number>

  終点のy座標

Example

Hg.WLine(win1, 100, 100, 300, 300);
Hg.WLine(win2, 100, 100, 300, 300);

描画するウィンドウを作成する．Openメソッドと違い，WOpenメソッドはカレントウィンドウが変更されません．

• w <Number>

  ウィンドウの幅

• h <Number>

  ウィンドウの高さ

• canvasId <String>

  canvasのId

Example

var win1 = Hg.Open(400, 400); // 400x400のウィンドウを作成
var win2 = Hg.WOpen(300, 300, "canvas2"); // カレントウィンドウが変更されない

指定したウィンドウに 指定された座標群 x，y を結ぶような多角形を描画． 最初の点と最後の点の間が結ばれます．

• win <Window>

  指定するウィンドウ

• n <Number>

  頂点数

• x <Array>

  x座標の配列

• y <Array>

  y座標の配列

Example

var x = [x0, x1, x2, x3, x4];
var y = [y0, y1, y2, y3, y4];

Hg.WPolygon(win1, 5, x, y);
Hg.WPolygon(win2, 5, x, y);

指定したウィンドウに 指定された座標群 x，y を結ぶような塗りつぶされた多角形を描画． 最初の点と最後の点の間が結ばれます．

引数 stroke が 0 の場合は周囲の線を描きません．

• win <Window>

  指定するウィンドウ

• n <Number>

  頂点数

• x <Array>

  x座標の配列

• y <Array>

  y座標の配列

• stroke <Number>

  周囲を描くかどうか

Example

var x = [x0, x1, x2, x3, x4];
var y = [y0, y1, y2, y3, y4];

Hg.WPolygonFill(win1, 5, x, y);
Hg.WPolygonFill(win2, 5, x, y, 0);
Hg.WPolygonFill(win2, 5, x, y, 1);

指定したウィンドウの描画する線の色を変更する いったん色を指定すると，別の色を指定するまで同じ色が使われます．一度も指定しない場合は黒で描画する． colorに指定する色はCSSで指定するフォーマットに対応

• win <Window>

  指定するウィンドウ

• color <String>

  線の色を表す文字列

Example

Hg.SetColor(win1, "red"); 
Hg.SetColor(win2, Hg.RGB(192, 80, 77);

指定したウィンドウの図形の塗りつぶす色を変更する colorに指定する色はCSSで指定するフォーマットに対応 別の色を指定するまで同じ色が使われます．一度も指定しない場合は白で塗りつぶされます．

• win <Window>

  指定するウィンドウ

• color <String>

  塗りつぶす色を表す文字列

Example

Hg.SetFillColor(win1, "red");
Hg.SetFillColor(win2, Hg.RGB(192, 80, 77);

指定するウィンドウに 文字列を描画する場合のフォントと大きさを指定する． いったん指定されると，別の指定があるまで同じ字体と大きさが使われる．

• win <Window>

  指定するウィンドウ

• x <Number>

  x座標

• y <Number>

  y座標

• 表示する文字列 <String>

指定したウィンドウの描画する線の太さを変更する 指定できるのは0より大きい数値のみで，それ以外の値を指定しても無視されます．

• win <Window>

  指定するウィンドウ

• t <Number>

  線の太さを示す数値

Example

Hg.WSetWidth(win1, 5); // win1の線の太さを5に指定
Hg.WSetWidth(win2, 3); // win2の線の太さを3に指定

指定するウィンドウに 座標(x, y)を左下隅として，指定された文字列を描きます． 左下隅の座標はウィンドウの外部の点でも構いません．

• win <Window>

  指定するウィンドウ

• x <Number>

  x座標

• y <Number>

  y座標

• 表示する文字列 <String>

Example

Hg.WText(win1, 10, 10, "Hello World");
Hg.WText(win2, 10, 10, "Hello World");