CANVAS中のマウスの位置の読み取り

pirika logo

MAGICIANとは、材料ゲノム(Materials Genome)、材料情報学(Materials Informatics)、情報化学(Chemo-Informatics)とネットワーク(Networks)を結びつけて(Associate)いかれる人材です。

プログラミング・トップ

親子で

JavaScript演習

化学系

HSPiP用

化学系プログラミング > Javascript化学系演習 > CANVAS中のマウスの位置

2021.2.11

キャンバス中のマウスの位置を習得するプログラム

水色のキャンバス中でマウスを動かしてください。
キャンバス中のマウスの位置を表示します。

キャンバスにイベントを取り出す機能を付け加えます。

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePosition(canvas, evt);
    var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
    PrintPosition(canvas, message);
    }, false);

キャンバス内でマウスが動かされた(mousemove)イベントが発生した時に、この関数が呼ばれます。
まず、キャンバス中の位置をgetMousePositionで取り出します。
キャンバスの左上が(0,0)であるとは限りません。
そこで、キャンバスの大外枠の四角形の位置を取り出します。

var rect = canvas.getBoundingClientRect();

そのイベント（マウスが動いた）が発生した時の、イベントの(x,y)の絶対座標は

evt.clientX 
evt.clientY

になるので、キャンバス中の(x,y)座標は

evt.clientX - rect.left
evt.clientY - rect.top

になります。

そこで、キャンバスの位置がスクロールして変わったとしても、マウスのキャンバス内での位置を得る事ができます。