canvasって何？

i.M.D. Staff

2015.07.31

WEB制作

canvas

どうも！
最近は、暑い！！とにかく暑い！！！
で、暑すぎるので集中力がなくなったときに、いろんなサイトを飛び回っていたら、動きが素敵なサイトにたくさん出会いました。
で、何で動かしているのか調べてみると、canvas要素でした。

で、canvasってなんぞや？
正確には、名前は知ってるけど、中身が分からない隣のクラスのあの子状態な感じになったので、いろいろ調べてみました。

canvasとは？

canvasはHTML5から追加された要素で、ざっくり言えば、図形を描いたり動かしたりすることができます。まぁ、そのまま書いただけでは動かないんですけどね…
javascriptと組み合わせて使うものなので、javascriptの知識も必要です。canvasにidを付けて、そのid名をjavascriptで操作をできるようにすることから始まります。
そのあと、コンテキストという操作するためのオブジェクトを取得して操作していきます。これにより、図形などが描けたりできます。
（ここら辺は次回に詳しく書きます）

canvasでできること

では、何ができるのか？
一言で言うと、Flashのような動きのあるサイトが作れます。
これは、説明するよりも見ていただいた方が早いと思いますので、いくつか参考サイトを紹介します。

http://news.spaceshowertv.com/
スペースシャワーTVのニュース専用のサイトです。波の部分がcanvasで表現されています。

http://www.jam3.com/
どこがcanvasかは一目瞭然ですね。このような、印象的な動きもできます。

http://dotby.jp/
こちらはドットをcanvasで表現しています。とっても印象的ですね。

ざっと３つばかり紹介しましたが、動きも滑らかで、とても印象深いサイトだったと思います。
このような動きをFlashではなく、HTML5+javascriptで表現できるのが魅力だと感じています。

便利なサイトに便利なライブラリ

ここまで、紹介するためにいろいろ調べてみましたが、やはり、自分のものにするのはなかなか難しい。
そこで、これから勉強するにあたり、便利そうだなって思ったサイトを紹介していきます。

http://www.createjs.com/easeljs

一番有名なライブラリのサイトです。どの参考サイトにも載っていました。

http://paperjs.org/

見つけた中で一番遊びました。examplesからいろんな動きが見れます。

http://processingjs.org/

こちらもたくさんの動きがあり、勉強に役立つと思いました。
他にもまだまだあると思うので、たくさん探して、勉強しようと思います。

最後に

いろいろ魅力を言いました。が、たとえ素晴らしく新しい技術であっても、製作で必要かどうかの判断も重要ですし、また、対応ブラウザについてもしっかりと把握しないといけません。
（詳しくはこちら）
IE8は使えません。（使える方法はありますが、ここでは割愛）
案件ごとの対応するブラウザによって、使う使わないを決めた方がいいと思います。
僕は、使っていきたい技術なので、それまでに自分のものにしたいです。