canvas上での画像にリンクを貼る方法

結構探したけどどこにもあまり書いてなかったので備忘録としてまとめることに。

まず、canvasを作成するところは色んなところで書かれているので割愛。
画像を描画する部分ですが、一応私の方法を書くと。

var img = new Image();
img.src = "画像URL";

で画像の準備を行い、

ctx.drawImage(img, x座標,y座標);

canvasオブジェクトに先ほどの画像をdrawImageする。
これで画像の描画終わり。

肝心のリンクを貼る方法ですが、canvasのオブジェクトを作った下辺りに

canvas.addEventListener("mousedown", mouseDownListner, false);

とやらを埋め込みます。

そして、関数にmouseDownListner(e)というのを作ります。

function mouseDownListner(e) {
	var rect = e.target.getBoundingClientRect();
	//座標取得
	mouseX1 = e.clientX - rect.left;
	mouseY1 = e.clientY - rect.top;
	if (mouseX1 > 画像X座標 && mouseX1 < 画像X座標 + 画像W幅) {
		if (mouseY1 > 画像Y座標 && mouseY1 < 画像Y座標 + 画像H幅) {
		    	location.href = "遷移先URL";
		}
	}
}

これでマウスを押した瞬間にそこに画像があった場合に遷移先URLへ飛ぶ関数の完成です。
なんと簡単これでcanvas上の画像をクリックするとリンクします。

マウスイベント便利すなぁ。

　Tweet