キャンバスでのマウスポインタの位置を取得するコードを紹介します。
概要
HTML Canvasでマウスポインタの位置を取得する場合は、キャンバスオブジェクトのmousemoveイベントをキャプチャすることで、マウスポインタの座標の値を取得できます。
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function PrintPosition(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '12pt "MSゴシック"';
context.fillStyle = 'black';
context.fillText(message, 32, 48);
}
function getMousePosition(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function draw() {
var canvas = document.getElementById('SimpleCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function (evt) {
var mousePos = getMousePosition(canvas, evt);
var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
PrintPosition(canvas, message);
}, false);
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>
解説
キャンバスでのマウスの移動を検出するには、キャンバスオブジェクトのaddEventListenerメソッドを呼び出し、'mousemove'イベントにイベントハンドラを追加します。
function (evt) {
var mousePos = getMousePosition(canvas, evt);
var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
PrintPosition(canvas, message);
}
イベントハンドラ内では、getMousePosition関数を呼び出し、マウスポインタの位置を取得します。'mousemove'イベントのイベントハンドラの引数のclientX , clientYでマウスポインタの座標を取得できます。mousemoveイベントでのマウスポインタの座標取得の詳細は
こちらを参照してください。
function getMousePosition(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
clientX , clientYで取得できる座標値はクライアント領域での座標値となるため、キャンバスの左上が、ウィンドウの左上と一致していれば同じ値でよいですが、一般的には、キャンバスの左上とウィンドウの左上は一致していないため、そのままの値は利用できません。
キャンバスが、クライアント領域のどの位置にあるかを取得するには、キャンバスオブジェクトの、getBoundingClientRect();メソッドを呼び出すことで、キャンバスの座標を取得できます。clientX , clientYから、キャンバスの左上X,Y座標の値を引くことで、キャンバスでの座標を求めることができます。
求めた座標値は、キャンバスに文字列描画で表示します。文字列の描画の詳細は
こちらを参照してください。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
マウスポインタをキャンバス上に移動させると、マウスポインタのキャンバス上での位置が取得でき、画面に表示されます。
マウスポインタを移動させると、座標の数値も変化します。
補足
匿名関数を利用しない場合の例です。下記のコードでも同じ動作になります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var canvas;
function PrintPosition(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '12pt "MSゴシック"';
context.fillStyle = 'black';
context.fillText(message, 32, 48);
}
function getMousePosition(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function draw() {
canvas = document.getElementById('SimpleCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', onmousemove_canvas, false);
}
function onmousemove_canvas(evt) {
var mousePos = getMousePosition(canvas, evt);
var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
PrintPosition(canvas, message);
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-01-17
作成日: 2015-10-07
