HTML5のcanvasでつくるダイナミックな表現

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

名古屋のホームページ制作会社花のや
花のやブログ
HTML5のcanvasでつくるダイナミックな表現

2013/11/22Web制作JavaScript

こんにちは。

先日bootstrapを少々触ってそろそろHTML5,css3,レスポンシブデザイン等もがんばるべきかなと思ったので
今回はcanvasについて少し。（この記事ではIE8では表示されない部分があります。）
私が初めてcanvasを触ったのは4～5年ほど前です。

それから大きなブレイクスルーがあったわけでもなく淡々とした状況ではありますがw3cの最終勧告に入っている状態ですので
大きな仕様変更とかはないのは当然ですが、一部プロパティでブラウザごとに扱える画像形式が違ったりとそのあたりのすり合わせがほとんど進んでいないような・・・。

スマホもiPhoneは当然として昨年あたりにandroidのほうもflashはなくなり、代替技術としてはいいと思うのですがいまいち盛り上がりに欠けています。

canvasでできること

canvasでできることというのは結局はアイデア次第だとは思いますが、画像や図形等を結構好きなように操作できるという点です、
CSS3でも矩形や円弧等多少の図形やグラデーションは描画することは可能ですが、パスが使える分canvasのほうがもう少し自由度が高く設定されているという感じです。
Flashよりは少し弱いですがある程度のアニメーションだとかそのあたりは追々こちらに切り替わっていくのかなとは思います。
まだまだFlashはPC向けに多くありハードコーディングできるなどメリットも十分ありますが
少し動きをつけるだけであればPCでしか見れない部分にお金をかけてFlashのアニメーションを作るのではなく
これからスマホのシェアや閲覧割合から考えると両方ともにみられるようなものを選定していくようにするのも手だと思います。
現状の一番のボトルネックはIE8ですが・・・。

[set_canvas]

ちょっと触ればこれくらいのこともできるので面白いと思うんですがいかがでしょう。
右側の枠の●をドラッグしてみてください。

参考サイト

http://www.html5.jp/