Goban 0.1

配置はまだ揃えていません。Java の囲碁プログラムで使用したイメージをそのまま利用しています。影を透明にしました。Java のときは不透明でした。

実行結果

Goban 0.1 には HTML5 Canvas が必要です。

ソース

"expand source" を押すと展開されます。元に戻すには、このページを再ロードしてください。

goban01.html

JavaScript の指定をします。 
<script type="text/javascript" src="js/goban01.js"></script>
<style> で机のイメージを指定しています。 
#table {
	color: white;
	background-image: url(img/table800.jpg)
}
Canvas を定義します。 
<h2>実行結果</h2>
<canvas width="800" height="600" id="table">Goban 0.1 には HTML5 Canvas が必要です。</canvas>

goban01.js

円形オブジェクトを描画します。 
/**
 * 円形オブジェクトを描画します。
 * @param x 描画する x 位置
 * @param y 描画する y 位置
 * @param s 影の長さ（高さ/2）
 * @param img オブジェクトのイメージ
 * @param context 描画先のコンテキストを指定します。
 */
function drawObject(x, y, s, img, context) {
	var r = img.width / 2;
	context.beginPath();
	context.arc(x + r + s, y + r + s, r, 0, 2 * Math.PI);
	context.fillStyle = "black";
	context.globalAlpha = 0.5;
	context.fill();
	context.globalAlpha = 1.0;
	context.drawImage(img, x, y);
}
碁盤を描画します。星の描画はまだ入れていません。 
/**
 * 碁盤を描画します。
 * @param x 描画する x 位置
 * @param y 描画する y 位置
 * @param ro 路数
 * @param s 影の長さ（高さ/2）
 * @param context 描画先のコンテキストを指定します。
 */
function drawBoard(x, y, ro, s, context) {
	var dx = 22;
	var dy = 24;
	var width = dx * (ro + 1);
	var height = dy * (ro + 1);
	var gwidth = dx * (ro - 1) + 2;
	var gheight = dy * (ro - 1) + 2;
	var gx = x + Math.floor((width - gwidth) / 2);
	var gy = y + Math.floor((height - gheight) / 2);
	// 碁盤の影
	context.beginPath();
	context.moveTo(x, y);
	context.lineTo(x + width, y);
	context.lineTo(x + width + s, y + s);
	context.lineTo(x + width + s, y + height + s);
	context.lineTo(x + s, y + height + s);
	context.lineTo(x, y + height);
	context.closePath();
	context.fillStyle = "black";
	context.globalAlpha = 0.5;
	context.fill();
	// 碁盤
	context.beginPath();
	context.rect(x, y, width, height);
	context.fillStyle = "burlywood";
	context.globalAlpha = 1.0;
	context.fill();
	// 木目
	drawWoodGrain(x, y, width, height, context);
	// 格子
	context.lineWidth = 1;
	context.strokeStyle = "black";
	// （枠）
	context.beginPath();
	context.rect(gx, gy, gwidth, gheight);
	context.stroke();
	// （横の格子線）
	var x1, x2, y1, y2;
	x1 = gx + 1;
	x2 = gx + gwidth - 1;
	for (var row = 1; row <= ro; row++) {
		y1 = gy + 1 + (row - 1) * dy;
		context.beginPath();
		context.moveTo(x1, y1);
		context.lineTo(x2, y1);
		context.stroke();
	}
	// 縦の格子線
	y1 = gy + 1;
	y2 = gy + gheight - 1;
	for (var col = 1; col <= ro; col++) {
		x1 = gx + 1 + (col - 1) * dx;
		context.beginPath();
		context.moveTo(x1, y1);
		context.lineTo(x1, y2);
		context.stroke();
	}
}
木目を描画します。 
/**
 * 木目を描画します。
 * @param x
 * @param y
 * @param width
 * @param height
 * @param context 描画先のコンテキストを指定します。
 */
function drawWoodGrain(x, y, width, height, context) {
	context.strokeStyle = "rgb(192, 153, 86)";	// 木目の色
	var xb0 = x;
	var xb1 = x + width - 1;
	var yb0 = y;
	var yb1 = y + height - 1;
	var xo, yo, xw, yw;
	var xc = xb0 + (xb1 - xb0) * 5 / 7;			// 木目の中心
	var yc = yb0 + (yb1 - yb0) * 5 / 4;
	for (var rw = 5; rw <= 460; rw += 5) {
		xo = xc + rw;
		yo = yc;
		for (var theta = 0; theta <= 2 * Math.PI;
				theta += 2 * Math.PI / 19) {
			xw = xc + Math.floor(rw * Math.cos(theta));
			yw = yc + 13 * Math.floor(rw * Math.sin(theta));
			var xw0 = xo, xw1 = xw, yw0 = yo, yw1 = yw;
			if (yw1<yb0 && yb0<yw0) {			//上辺でクリッピング
				xw1 = xw0+(xw1-xw0)*(yb0-yw0)/(yw1-yw0);
				yw1 = yb0;
			} else if (yw0<yb0 && yb0<yw1) {	//上辺でクリッピング
				xw0 = xw1+(xw0-xw1)*(yb0-yw1)/(yw0-yw1);
				yw0 = yb0;
			}
			if (yw1<yb1 && yb1<yw0) {			//下辺でクリッピング
				xw0 = xw1+(xw0-xw1)*(yb1-yw1)/(yw0-yw1);
				yw0 = yb1;
			} else if (yw0<yb1 && yb1<yw1) {	//下辺でクリッピング
				xw1 = xw0+(xw1-xw0)*(yb1-yw0)/(yw1-yw0);
				yw1 = yb1;
			}
			if (xw1<xb0 && xb0<xw0) {			//左辺でクリッピング
				xw1 = xb0;
				yw1 = yw0+(yw1-yw0)*(xb0-xw0)/(xw1-xw0);
			} else if (xw0<xb0 && xb0<xw1) {	//左辺でクリッピング
				xw0 = xb0;
				yw0 = yw1+(yw0-yw1)*(xb0-xw1)/(xw0-xw1);
			}
			if (xw1<xb1 && xb1<xw0) {			//右辺でクリッピング
				xw0 = xb1;
				yw0 = yw1+(yw0-yw1)*(xb1-xw1)/(xw0-xw1);
			} else if (xw0<xb1 && xb1<xw1) {	//右辺でクリッピング
				xw1 = xb1;
				yw1 = yw0+(yw1-yw0)*(xb1-xw0)/(xw1-xw0);
			}
			if (xb0<=xw0 && xw0<=xb1 && xb0<=xw1 && xw1<=xb1 &&
					yb0<=yw0 && yw0<=yb1 && yb0<=yw1 && yw1<=yb1) {
				context.beginPath();
				context.moveTo(xw0, yw0);
				context.lineTo(xw1, yw1);
				context.stroke();
			}
			xo = xw;
			yo = yw;
		}
	}
}
メインです。ロードの際に実行されます。 
window.onload = function() {
	// キャンバスとコンテキスト取得
	var canvas = document.querySelector('#table');
	var context = canvas.getContext('2d');
	// キャッシュにイメージを読み込んでおく
	var imgbb = new Image(134, 134);		// 黒の碁笥 (black bowl)
	imgbb.src = "img/blackbowl134.png";
	var imgwb = new Image(134, 134);		// 白の碁笥 (white bowl)
	imgwb.src = "img/whitebowl134.png";
	var imgl = new Image(110, 110);			// 碁笥の蓋 (lid)
	imgl.src = "img/lid110.png";
	var imgb = new Image(22, 22);			// 黒石 (white stone)
	imgb.src = "img/black22.png";
	var imgw = new Image(22, 22);			// 白石 (black stone)
	imgw.src = "img/white22.png";
	// 座標 (280, 50) にタイトルを表示
	context.fillStyle = "white";
	context.font = "bold 20px Arial";
	context.fillText("Goban 0.1", 280, 50);
	// 座標 (200, 300) に黒の碁笥のイメージを表示
	drawObject(200, 300, 20, imgbb, context);
	// 座標 (10, 110) に白の碁笥のイメージを表示
	drawObject(10, 110, 20, imgwb, context);
	// 座標 (410, 110) に碁笥の蓋のイメージを表示
	drawObject(410, 110, 8, imgl, context);
	// 座標 (420, 300) に碁笥の蓋のイメージを表示
	drawObject(420, 300, 8, imgl, context);
	// 座標 (435, 135) に黒石のイメージを表示
	drawObject(435, 135, 2, imgb, context);
	// 座標 (450, 150) に白石のイメージを表示
	drawObject(450, 150, 2, imgw, context);
	// 座標 (210, 110) に6路盤の碁盤を表示
	drawBoard(210, 110, 6, 9, context);
};