初めての HTML5 canvas
超久々にブログ投稿。9ヶ月も放っておいたとは、いけませんね。
久しぶりにプログラム欲求が昂まっています。
が、ウェブサイト上で作品を展示をしようとした場合、政治的に惨敗を喫してしまった swf はかなり不利な気がします。wonderfl の過去作品の状況なんか、それを如実に表わしているんじゃないかと思う次第。
で、ここは html5 の canvas をちょっと試してみようかね、と一念発起。運営を始めてから何年経ったと思ってんだよ、な、このタイミングで jsdo.it に投稿してみましたよ。
まずは ActionScript 3.0 でコードを書いたんで、wonderfl にも同時に投稿しました。
移植に当っては、テキストエディタで手打ち、という手法を採用したんですが、いやー実にめんどくさいっすねー。統合開発環境のありがたさを改めて認識させてもらいました。
まずはそれぞれの結果から。上が swf、下が js。
円の反転を使ったマウスインタラクティブ小品です。
ラジオボタンでモードを切り替えます。invert が普通の反転、variation 1 は各円の最初の配置に縛られた反転、variation 2 は variation 1 に加え、Y軸対称を逆転させています。
またステージをクリックすることでプラスとマイナスを切り替えます。青のときがプラス、赤のときがマイナス。
モードが3種類、プラスorマイナスが2種類で計6種類の挙動を取ります。
今回の移植で感じた、理想（swf）と現実（canvas）の差異は以下のあたり。
- 円が重なった時の表示
- ラジオボタンを押したときの状況
1 について。
swf では円の重なった部分は差の絶対値のような状況が発生して地の色が見えます。また一つの円が画面全体を覆ってしまうときには、図の色と地の色が反転します。
canvas では前者のようにはならず、円同士が重なった部分も図の色のまま。そのためなのか、円の全部や一部が消えることがあります。おそらく後者の状態の時にそのような現象が起きるのかなぁ、と推測します。
円が消えるのは作品としては致命的ですねぇ
もしかしたら canvas を円の数だけ作って、一つの canvas には一つの円だけを表示し、それらをブレンドモード「差の絶対値」で合成すれば、swf のようにできたりするのかも、とか思ったりしますが、それはいくら何でも酷いかなぁ、と思う次第。
2 について。
swf ではラジオボタンを押したとき、ステージにまでマウスイベントが行かないよう、それ相応の細工をしています。
canvas ではラジオボタン押下で、ステージ色も切り替わる、つまりプラスマイナスも切り替わってしまいます。
この挙動は回避したいんですが、1日2日程度の付け焼き刃の知識では、回避方法が思いつかない。
今後も html5 で何かプログラミングしたいかどうか、というと、かなり微妙ですなぁ。
Comments
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!