2014最近、HPの外観に不満が溜まってきたので、春休みということもあって作りなおしています。jsやらHTMLやらCSSやら、書くのは別段苦手じゃないのですが、作りなおすたびに1から勉強している感じになってしまってううむ。Webはブラウザのバージョンや仕様が頻繁に変わるので、2年くらいたって作りなおそうと思うと、やりたいことを実現するための手段が変わってたりするので厄介なんですよね。記述のスタイルも推奨されるものが変わっていたりして、やはり作り直すなら最新の書き方で......とか思うといままでの知識(しかも半分くらい忘れてる)が通用しないことが多く、面倒くさいです(。・今までよりさらにわかりやすく、シンプルに・動的に、ダイナミックにというテーマで作っています。いまのサイトを作った頃は丁度スマホが普及してきた頃とかで、まだユーザー数も少なく、プロセッサや回線も非力だったのでできるだけ静的にページを作った記憶がありますが、今回は趣向をかえて、ダイナミックな動きがあるサイトにしたいなーと思っています。扱いがちょっと難しい。前置きが長くなりましたが詰まったところや忘れてたTipsをメモしておきます。割りと自分用ですがcanvasを背景として使い、上にボタンをのせるcanvasで描画している領域の上にリンクボタンを設置したい場合、canvasの機能で(canvas内で)ボタンを描画し、js側でマウスイベントを拾って飛ばす方法が一般的です。条件を限定すれば、普通のリンクボタンをcanvas上に表示させることができるみたいです。canvasに1overflow:visible;を追加して、リンクボタンに12background:transparent;position:absolute;を追加すればOK。canvasとボタンの透過を重ねたままで、表示&クリックさせることが出来ます。うまくやらないとボタンでcanvasの表示領域が隠れてしまったり、ボタンがクリックできなくなるのですが、上のようにして一応動きます。canvasでアニメーションを書くゲームとかを作るときと同じように、1clearRectで領域をリフレッシュ2シーンを描画3繰り返しでOK。繰り返しは、whileループとかで回すと制御を奪ってしまって問題になるので、手っ取り早く、jQueryのanimeteのstepオプションで描画関数を呼んでもらうのが楽ちんでした。ループさせたい場合はsetTimeoutを使う。canvasのサイズはHTML側にハードコードしないとダメhtml側のwidth,height指定で描画サイズのバッファを作っているみたいです。