Element: mousedown イベント

mousedown イベントは、要素上でポインティングデバイスのボタンが押下されたときに Element に発生します。

例

mousedown, mousemove, mouseup イベントを使用して、ユーザーがキャンバスにお絵かきができるようにする例です。

次の例は、mousedown、mousemove、mouseup イベントを使って HTML5 の要素である canvas の上にお絵かきができるものです。機能は単純で、先の太さは 1、線の色は黒に固定されています。

ページが読み込まれると、定数 myPics と context が定義され、canvas とその上にドローイングしていく 2d context が紐付けられます。そして定数 rect はページに対する canvas の座標を保存しています。

mousedown イベントが発火すると線の描画が始まります。イベントが発火すると、まずマウスの x 座標と y 座標が変数 x と y に記録され、フラグ isDrawing の値が true になります。

ページの上でマウスを動かすと、mousemove イベントが発火します。このときフラグ isDrawing が true の場合、mousemove のイベントハンドラーは drawLine 関数を呼び出し、座標 (x, y) からマウスの現在地まで線を引っ張ります。(Remember, the current x and y values are modified using the rect constant to adjust the coordinates so they are relative to the upper-left of the canvas.)

When the drawLine() function returns, we adjust the coordinates and then save them in x and y.

マウスを放すと mouseup イベントハンドラーが実行し書いていた線を書き切ります。そして変数 x と y をそれぞれを 0 に設定し、mousemove イベントが発生してもこれ以上描画を続けないようにフラグ isDrawing の値を false に変えます。

HTML

<h1>マウスイベントを使ってお絵かき</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}

JavaScript

// isDrawing が真のとき、マウスを動かすと線が描ける
let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById('myPics');
const context = myPics.getContext('2d');

// The x and y offset of the canvas from the edge of the page
const rect = myPics.getBoundingClientRect();


// mousedown、mousemove、mouseup のそれぞれに対してイベントリスナーを設定する
myPics.addEventListener('mousedown', e => {
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
  isDrawing = true;
});

myPics.addEventListener('mousemove', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = 'black';
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

結果

仕様書

ブラウザーの対応

関連情報

• イベントの紹介
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu