Canvasで「さざ波」を作るデモを作ったよ

試してみて。

• Canvas Ripple

クリックでさざ波を作り、マウスのボタンを押してる間は200msおきにさざ波を描き続ける。簡単。

波の干渉 (重ね合わせ) もちゃんと見られるよ。

Firefox 3.0.10、Safari 4 beta、Opera 9.64、Opera 10 alpha で試した。
ただ、Opera 9.64 では drawImage(canvas,..) したときの alpha の取り扱いにバグがあるので、色がおかしくなる。Opera 10 なら大丈夫。(ただ Firefox や Safari に比べるとちょっともっさりしてる)

uupaa さんの uupaa-excanvas.js では Silverlight モードのときに限って drawImage(canvas,..) が使えるらしいので、一応それもロードしてある。もし IE でも動いたら報告お願いします。

• いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log

JavaScirpt のソースはこちらに置いた。

• http://gist.github.com/105217

このソースがそのままブックマークレットになっているので、ここから全部選択→コピーしてアドレス欄に貼りつけたらどのページでも使える。

色んなページでやるのが楽しい。

ブックマークレットを実行した後、元に戻すときはリロード。