銀杏の木

つい先日、

そして HTML5 対応が出来たら、トップページにアニメーションを追加したり HTML5 らしいデザインにしたりしてみようと思う。

・・・と書いたが、興味があったので、先にトップページにアニメーションを追加した。

「Canvasで桜を降らせてみました」を参考に、銀杏の葉が舞い落ちるようにしてみた。

なかなか興味深い内容で、 javascript を用いて描画処理を行い、 canvas の内容を消去して再描画することを繰り返すことでアニメーション効果を実現する、などの canvas を使ったアニメーションの基本が分かったし、 setTransform() を用いて画像を変形する方法も分かった。

マウスカーソルにも反応させたかったので検索して調べ、 addEventListener() を使い、 mousemove イベントを取得し、マウスカーソルが canvas 上を移動しているときは銀杏の葉がカーソルに近寄ってくるようにもしてみた。

ただ、 canvas の上にカウンターや銀杏の葉の画像が重ね表示されるようにしたのだが、それらの上にカーソルがあるときは、 canvas に mousemove イベントが届かないようだ。ある要素より上に別の子要素がある場合は、そちらにイベントが取得され、親要素には届かない仕組みのようだ。透明な子要素として、一番上にcanvas と位置とサイズが等しい別の canvas を配置し、そちらのイベントを取得するようにして問題を解決したが、親要素にもイベントが届くように設定する方法があるかも知れない。