ホバー時にHTML5キャンバスの長方形を更新する方法

ホバー時にHTML5キャンバスの長方形を更新する方法

HTML5のCanvasで描画した長方形にマウスカーソルが重なったとき（ホバー時）に、その見た目を変えて再描画する方法を紹介します。jQueryの hover() メソッドと、Canvas APIの fill() メソッドを組み合わせることで簡単に実現できます。

実装コード例

以下のコードを実行すると、キャンバス上の長方形にマウスを合わせたときに、輪郭線だけだった図形が青色で塗りつぶされます。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 長方形のパスを作成（x:20、y:20、幅150、高さ100）
context.rect(20, 20, 150, 100);
context.stroke();

// ホバー時に長方形を塗りつぶす
$(canvas).hover(function(e){
    context.fillStyle = "blue";
    context.fill();
});

コードの解説

• getContext("2d")：キャンバスの2D描画コンテキストを取得します。以降の描画操作はすべてこのコンテキストを通じて行います。
• rect() メソッド：指定した座標とサイズで長方形のパスを作成します。引数は左から順に「x座標、y座標、幅、高さ」です。
• stroke() メソッド：作成したパスに沿って輪郭線を描画します。
• hover() メソッド：マウスカーソルが要素に乗ったタイミングで、指定した関数を実行します。
• fillStyle と fill()：塗りつぶしの色を設定し、現在のパス（ここでは長方形）をその色で塗りつぶします。

注意点

fillStyle に設定する色は必ず文字列として指定してください。"blue" のようにクォートで囲まないと、JavaScriptでは未定義の変数として扱われ、意図したとおりに動作しません。

また、ホバーが外れたときに元の状態へ戻したい場合は、mouseleave イベントや clearRect() メソッドを使って再描画する処理を追加すると、より使いやすいインタラクションになります。