1. フツーなウェブサイトな受託案件で
canvas使いたい
@静岡WEBフロントエンド勉強会
2013.2.2
<canvas></canvas>

2. 自己紹介
● 相澤啓祐
● @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

7. 表現力あり過ぎる
● ああああ～

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/