技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > HTML5のcanvasでつくるダイナミックな表現
2013/11/22ホームページ制作JavaScript

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

こんにちは。

先日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/

 

wada

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと
紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ