“Canvas”小技紹介 ～地図に機能を追加してみよう～

var $j = jQuery.noConflict();
var pathM = "http://labs.microad.jp/blog/wp-content/uploads/2013/02/map.png";
var pathI = "http://labs.microad.jp/blog/wp-content/uploads/2013/02/index.png";

/* 日本地図作成 */
function createJapanMap(container) {
	var $container = $j("#" + container);

	/* 表示用Canvas */
	var canvasM = document.createElement("canvas");
	// 適当なサイズ
	canvasM.width  = 300;
	canvasM.height = 300;

	/* canvas対応チェック */
	if (!canvasM || !canvasM.getContext) {
		$container.text("利用ブラウザはCANVASに対応していません。");
		return;
	}

	/* 判定用Canvas */
	var canvasI = document.createElement("canvas");
	/* 表示用と大きさを合わせる */
	canvasI.width  = canvasM.width;
	canvasI.height = canvasM.height;

	/* 表示用canvasのみ追加 */
	$container.append(canvasM);

	/* 描画機能取得 */
	var ctxM = canvasM.getContext("2d");
	var ctxI = canvasI.getContext("2d");

	/* 指定座標の色を取得 */
	ctxI.getColor = function(x, y) {
		/* 指定座標の色を取得 */
		var bit = this.getImageData(x, y, 1, 1);
		/* 配列に r g b a の順で格納されている */
		var buf = bit.data;
		var color = {r: buf[0], g: buf[1], b: buf[2], a: buf[3]};
		return color;
	};

	var imgM = new Image();
	imgM.onload = function() {
		/* 画像読み込み後描画 */
		drawImage(canvasM, ctxM, this);
	};

	var imgI = new Image();
	imgI.onload = function() {
		/* 画像読み込み後描画 */
		drawImage(canvasI, ctxI, this);
	};

	/* 表示用Canvasにクリックイベント処理追加 */
	$j(canvasM).click(function(e) {
		var x, y;

		/* 各ブラウザ用の処理 */
		if ($j.browser.mozilla) {
			var off = $j(this).offset();
			x = (e.pageX - off.left);
			y = (e.pageY - off.top);
		} else {
			x = (e.offsetX == undefined) ? e.layerX : e.offsetX;
			y = (e.offsetY == undefined) ? e.layerY : e.offsetY;
		}

		/* 判定用Canvasの色を取得 */
		var color = ctxI.getColor(x, y);
		/* r = 都道府県コード * 2 */
		var pid = Math.ceil(color.r / 2);

		if (pid > 0 && pid <= 47) {
			alert("都道府県コード:" + pid + " が選択されました。");
		}
	});

	/* 画像読み込み */
	imgM.src = pathM;
	imgI.src = pathI;
}

/* 画像をcanvasに描画する */
function drawImage(canvas, ctx, image) {
	/* 画像の幅をcanvasに合わせる */
	var sc = canvas.width / image.width;
	var iw = Math.floor(image.width  * sc);
	var ih = Math.floor(image.height * sc);

	ctx.drawImage(image, 0, 0, iw, ih);
}

$j(function() {
	/* 呼び出し */
	createJapanMap("canvas_frame");
});