HTML5のcanvasでマウスオーバー時の画像スケーリングを実装する方法

HTML5の<canvas>要素を使うと、マウスオーバー時に画像を拡大・縮小表示するインタラクティブな演出を簡単に実装できます。本記事では、Vanilla JavaScript（フレームワークなどに依存しない素のJavaScript）を用いた具体的な実装手順を解説します。

マウス移動時の処理を実装する

まず、キャンバス上でマウスが移動した際に呼び出される関数を定義します。以下のように記述してください。

function move(e) {
    var pos = getMousePos(myCanvas, e);
    context.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

この関数では、getMousePos()を使ってキャンバス内のマウス座標を取得し、その値をもとにdrawImage()で画像を描画しています。座標にマイナスの値を渡すことで、マウスの動きに連動して画像がスケール表示される仕組みです。

イベントリスナーを登録する

次に、キャンバスに対して必要なイベントリスナーを追加します。

// 必要なイベントリスナーを追加
myCanvas.addEventListener('mouseout', display, false);
myCanvas.addEventListener('mousemove', move, false);

この設定により、マウスがキャンバス上にある間はmove()関数が実行され、キャンバスからマウスが離れたタイミングではdisplay()関数が呼び出されます。

初期表示用の関数を定義する

最後に、マウスアウト時に実行されるdisplay()関数を以下のように定義しましょう。

function display() {
    context.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}

ここではビットシフト演算子（>>）を活用し、画像サイズを半分に縮小して描画しています。img.width >> 1はimg.width / 2と同じ結果になるため、軽量かつ高速にリサイズ処理が行えます。

まとめ

以上の手順で、マウスオーバー時に画像が拡大され、マウスアウトすると縮小表示に戻るスケーリング機能が完成します。mousemoveイベントとdrawImageメソッドを組み合わせた基本テクニックは、ギャラリーや商品画像のプレビューなど、さまざまな場面で応用できるので、ぜひ活用してみてください。