グリッドシート作成

下のパラメータを入力してボタンをクリックするとヘックス、スクエアシートを作成します。
横、縦はシートの大きさ（ピクセル）です。
辺長はグリッドの1辺（ピクセル）の長さです。
「子ウィンドウ」ボタンをクリックすると、別ウィンドウにシートだけを表示します。
「PNG形式で保存」ボタンをクリックすると、画像ファイルとして保存されます（一度「下に作成」で表示してください）。
グリッド形状
横
縦
辺長
ヘックス方向 横 縦

Webページに表示する場合

ソースからGridMaker.jsをコピーし、ヘックスシートを表示したいHTMLで読み込んでください。
次に次のようにcanvasを記述してください。動的に書き換える必要がなければタグを記述するだけで描画されます。
<canvas class="HexGrid" width=640px height=480px data-stroke=25 [data-vertical]>

class:HexSheetを指定します。
width:canvasの幅を指定します。
height:canvasの高さを指定します。
data-stroke:ヘックスの1辺の長さ（ピクセル）を指定します。
data-vertical:記述した場合、縦方向のヘックスを描画します。

（例：<canvas class="HexGrid" width=300px height=200px data-stroke=15 data-vertical>）

スクェアシートの場合はdata-verticalの指定がありません。
（例：<canvas class="SquareGrid" width=300px height=200px data-stroke=30;）

キャラクターアイコンを表示する場合

GridMakerに準備したJavaScriptの関数を使用することでキャラクター画像をシート上に表示することができます。

上図のコードは次の通りです。

ヘックスの場合

<div id="HexArea" style="width:300px; height:200px;">
	<canvas id="HexGridIcon" class="HexGrid" width=300px height=200px data-stroke=25 data-vertical></canvas>
</div>
<script type="text/javascript">
	HexSheet.calcBasePosition(25, 40, 32, "vertical");
	HexSheet.drawCharacter(1, 1, "reimu", "200.png", "HexArea", "vertical");
</script>

スクエアの場合

<div id="SquareArea" style="width:300px; height:200px;">
	<canvas id="SquareGridIcon" class="SquareGrid GridAndIcon" width=300px height=200px data-stroke=30></canvas>
</div>
<script type="text/javascript">
	SquareSheet.calcBasePosition(30, 40, 32);
	SquareSheet.drawCharacter(1, 1, "reimu", "200.png", "SquareArea");
</script>

説明

ヘックスシートの場合はHexSheetオブジェクト、スクエアシートSquareSheetオブジェクトを使用します。
キャラクターアイコンを表示する場合、canvasをdivで囲んでいなければなりません。また、divの大きさは内部のcanvasと一致していなければなりません。
表示するキャラクターの画像ファイルは別途準備しておく必要があります。
  1. ベースの座標を計算する
    calcBasePosition(stroke, width, height, direction)を呼んで基本の座標位置を計算します。
    複数のアイコンを表示する場合でも1つのグリッドに対して1回だけ呼び出せばOKです。
    引数は次の通りです。
    　stroke: グリッドの辺の長さ（ピクセル）
    　width, height: アイコンの表示サイズ（ピクセル）
    　direction: ヘックスグリッドの場合、縦にまっすぐ並んでいる（"vertical"）、横にまっすぐ並んでいる（"horizontal"）を指定します。
  2. 画像を表示する
    drawCharacter(x, y, id, img, target)を呼んで画像を表示します。
    複数の画像を表示する場合、必要な回数だけ呼び出してください。
    引数は次の通りです。
    　x, y: 画像の表示位置。何マス目に表示するかを指定します。値は0から開始します。
    　id: 表示された画像のIDです。HTML上でユニークでなければなりません。
    　img: 画像ファイルへのパスです。
    　target: 画像を表示するdivタグのIDを指定します。
    　direction: ヘックスグリッドの場合、縦にまっすぐ並んでいる（"vertical"）、横にまっすぐ並んでいる（"horizontal"）を指定します。
『The Lunatic』