More Related Content Similar to 20130202 fe勉強会 canvas
Similar to 20130202 fe勉強会 canvas (20) 20130202 fe勉強会 canvas2. 自己紹介
● 相澤啓祐
● @ksk1015
● マークアップとかjs書いたりとかしてます
● Csserです
● http://jsdo.it/ksk1015
3. canvasって何?
● <canvas></canvas>
● Javascriptから自由にグラフィックを描画でき
る要素
● 点、線、曲線、四角、円、グラデ、画像、拡
大、縮小、回転、解析、まぁ何でもできちゃう
● http://www.html5.jp/canvas/index.html
4. canvasのサポート状況
● デバイス・ブラウザのサポート状況もいい
● ざっくり言うと、IEの8以前じゃなきゃ使える
● スマホもほぼ使える
● http://caniuse.com/#feat=canvas
5. 古IEでもそこそこいける
● IE8以前もExploreCanvasというエミュレート
するライブラリがある。
● 複雑なことしなきゃ使えるっぽい
● http://excanvas.sourceforge.net/
6. canvas何ができるの?
● アプリ
● ドローツール http://mudcu.be/sketchpad/
● ゲーム
● enchant.js(ゲーム作るライブラリ)
● http://9leap.net/
● なんかすごくい動きするやつ
● http://design.kayac.com/topics/2012/12/canvasArtScript
● 3D
● http://clockmaker.jp/labs/101003_js_3d/index.html
8. でもフツーのサイトには
さほど使われてない
● 敷居高い
● Flashのような定番オーサリングツールがない
– あるみたいだけどよくわからん
● コード書かなきゃ使えない
● dom・cssベースで十分
● CSS(transform, transition, animation, filter等)の
表現力が高まり、canvas使う必要ない
9. でもフツーのサイトの受託案件で
canvasを使いたい!
● 簡単にグラフ作れるライブラリ
● flotr2
– http://www.humblesoftware.com/flotr2/
● jQuery Visualize
– https://github.com/filamentgroup/jQuery-Visualize
● ぷよぷよした動き(CSSでは表現できない)
● http://mon.cifaka.jp/
10. でもフツーのサイトの受託案件で
canvasを使いたい!
● 簡単にグラフ作れるライブラリ
● flotr2
– http://www.humblesoftware.com/flotr2/
● jQuery Visualize
– https://github.com/filamentgroup/jQuery-Visualize
● ぷよぷよした動き(CSSでは表現できない)
● http://mon.cifaka.jp/