読者です 読者をやめる 読者になる 読者になる

HTML5のCanvas

HTML5

CanvasHTML5で正式に追加される新しい仕様です。詳しい経緯はCanvasとは - Canvas - HTML5.JP
などで書かれています。
要はHTMLとJavaScriptだけで好きなように絵が描けるということですね。
このCanvasを使って以前Flashで実装したデモを移植してみました。
Page not found - newcritics.com
f:id:y_310:20091004165710p:image
光の玉が流れていくデモなのですが、Flash(ActionScript)より簡単に書けた気がします。
ただ動作速度がFlashより圧倒的に遅いですね。画面をクリックするとBlurエフェクトがかかるようになっているのですが、これをかけるとがくっと速度が落ちます。(Blurをかけすぎというのもあるのですが・・・)
高速化する手法もわからなかったのでエフェクトを切り替えられるようにしてお茶を濁してしまいました。
恐らくぼかしのアルゴリズムは近傍の画素から補間する手法だと思うので、ぼかしすぎると近傍サイズが巨大になってしまって負荷が簡単に増大するんでしょうね。
今回の場合は背景が黒、光の玉は白、円形と決まっているのでBlurを使わずに自分で円の周りにグラデーションを書くような処理を書いた方が良いのかもしれません。
CanvasクラスのgetImageDataを使えばピクセル単位のアクセスが出来るようです。