日別アーカイブ: 2014-10-07

CANVASでマウスのクリックを拾う

マウスのクリック位置により、希望するページにジャンプする場合、クリッカブルマップ機能を利用します。日本地図のような複雑な画像の特定部分をクリックして処理を振り分ける場合には最適です。クリッカブルマップについてはクリッカブルマップ考察47都道府県の魅力を参照ください。

一方、将棋盤の目のような規則正しい箇所をクリックしそのクリック位置を反映させるとき、クリッカブルマップ機能でも問題ありませんが重々しい感じがします。近くのコンビニに登山靴を履いて買い物に出かけるようなものです。

今回、教室の机に座った着席者を想定した処理を考えてみることにしました。HTML5のCANVASを用いた例を掲げます。任務0~39の部分をクリックしてください。クリック位置に応じた処理が開始されます。