Canvas には描画した要素をマウスに反応させるインターフェースがないので、どうやってんのかなーとか思いつつ、放っておいたけど、でも IE9 もでるしなーとか思って考えてみた。
要はマウスの位置と Canvas の位置を取得して Canvas 内で描画した要素の位置にマウスが来た時に処理を走らせればいい。
ちょうど参考サイトもみつけたので書いてみた。
- まず Canvas のページ内の絶対位置を取得
- それと Canvas に描画する要素の Canvas 内での x と y 座標と width と height も配列かなにかに代入してグローバルオブジェクトとして保存
- そいで、ページ内のマウスの x と y 座標を監視しつつ
- マウスの x と y 座標から Canvas のページ内の絶対位置の x と y 座標を引く
- それが先ほど保存した描画した要素の位置に入ったら関数を走らせるという処理
こないだすごいライブラリもでたし、今後はもっと簡単に扱えるライブラリも充実していくのだろうけれど、ヘタはヘタなりに基本的な部分は理解しておこうと思って。処理をライブラリに丸投げしては、言語変わったらもうお手上げってなるんでリスクが高い。
ややこしいなとおもいつつ。でも Canvas っていう名前の通り、そこは真っ白な Canvas なので、あえてこうなってるのかもしれないな。
せっかくなので、なにか凝ったものでもつくってみようか。
Demo
put