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

kazasikiがプログラミングするブログ

プログラミングとかコンピュータとかWebとか

HTML5のCanvasって何に使うの?って話(あとWebGLも)

とりあえず「HTML5を触ってみよう」的なことをやってる人たちを見ると、
実際の開発をするにあたってそのタグを何に使うのだろうとか、
他の手段とどう使い分けるのだろうとか、
そういうことをいつも思います。

ということで、今回はCanvasタグのお話です。HTML5Canvasタグはどういったものに使われるべきでしょうか?

私の結論

私の結論は以下です。
1. シンプルな図やインタラクティブ性の実現
2. 軽い演算で描画される背景的なもの(スクリーンセイバー的な)
3. 描画は重いけど、リアルタイム性の高い操作がないもの

結論の根拠として、そもそもブラウザでの描画処理はまだなんだかんだ言って重いんですよね。あまり凝った描画は処理として負担が大きくレスポンスが遅くなったります。(記事投稿時)

結論1

シンプルな図の描画というのは、「図を描画する部分の処理」がシンプルで軽いという意味です。四角とか丸とか楽でいいです。そういった図形であれば、画像データを用意するよりもファイルの扱いがない分、管理というか用意が楽です。描画処理が一定以上複雑なスクリプトになるようなら最初から画像を用意して動かしたほうがいいかと思います。ちなみに私は前Canvasでこんなの作りました。楽でした。
Gist(HTML Preview) - WhiteDay_Reversi | http://goo.gl/qjdn8d

結論2

イメージを見ていただくほうが早いと思います。(ネットで見つけてきたやつですが。。。)
Canvasで線をアニメーションした背景にする | begoingtoブログ http://blog.begoingto.jp/canvas-bg-line-anime/
おしゃれです。(内容によりますが)描画も軽い。

結論3

どちらかというとWebGLとかそっち系を見てて思ったことなのですが、レスポンスが悪いのが気にならないコンテンツが存在します。例えば、ビリヤードやボーリングのゲームはあまり気になりません。
プレイヤーの操作が終わってから実際のオブジェクトが動くので、操作してる時間の処理は軽く、逆にそこ以外が重くてもストレスになりません。逆に、障害物を避けるタイプのアクションゲームなんかはストレスがやばいです。
ユーザの操作に係る部分だけ軽くしといてそれ以外は重くてもいいのであれば、本来なら重すぎるリッチなグラフィックでも色々できることがあるように思います。

まとめ

どんな技術にもそれに適した使い方というものがあって、初めは試行錯誤から始まります。今回はどちらかというと、技術的な話よりも「ブラウザでの描画処理は重い」ということを前提として「じゃあその条件の中でなにができるか」的な話をしました。ブラウザでの処理を軽くする努力と、重くても使える場所を探す努力を同時進行で進めつつWebの進歩に備えましょう、というところでこの辺で。