HTML5の<canvas>って何？
canvasとは、CSSでは描けない複雑な図形の描画を
サポートするライブラリという理解でOKです。
canvas自体はHTML5で用意されたタグですが、
div同様に縦横の枠を定義するのみです。
ここを目がけて描画処理を行うのはJavaScript（またはjQuery）の役割。
DOMにアクセスしてcanvasオブジェクトを取得し、
描画に関する設定を保持しているコンテキストを取り出します。
var c = $('?#?canvas?'); var ctx = c.getContext('2d');
あとはコンテキストが提供する様々な描画メソッドを呼び出す。
ctx.moveTo(20, 20);
みたいな感じです。
ただ、用意されているメソッドは
「指定した点から点へと線を引く」
ような非常に原始的なものばかり。
DirectXという技術が登場した当時PC用ゲームを作る基盤技術として
「Direct2D」「Direct3D」などが注目を集めたのですが、
それらにも全く同様のメソッドがありました。
moveTo()
lineTo()
fillRect()
drowImage()
なんとなくメソッド名だけで何を描画するのか想像できますね。
これをウェブベースで近いことができるようになったのがcanvas、
と言えると思います。
昔流行ったことが別の形で登場。
よくあることですね。
ただ、このcanvas、一行書くだけでデザインされた図形を
表示してくれるような魔法ではありません。
ここは、jQueryでスライダーを組み込んだりする場合と同じで、
ライブラリ毎に決まったメソッド決まったオプションを使うことになります。
なので結局、描画したい目的に応じてライブラリを探したり、
ライブラリ独自の呼び出し方を調べる作業は必要なワケですね。
静止画像でグラフなどをデザインするのに比べると、自由度は少ないと思います。
ただし、JavaScript（jQuery）で操作しますので、
条件に応じて表示内容・色・位置を変えたり、
描画メソッドの呼び出しに時間差を持たせることで、
ちょっとしたアニメーション（フェードIN/OUTやディレイ）
を付加することができますね。
画像に比べて軽量なのもメリット。
スマホサイトに適しているかも？
完全マンツーマンのオンラインレッスンのご案内
リクルート社が運営するスキルアップサイト「教える学べる」3つ星講師です。
≫ ページ内の「先生に聞いてみる」ボタンでお気軽にご相談ください
※平日の夜は予約が埋まりやすいのでお早めにご相談ください。
※Facebookでもプログラミング＆コーディングの本質を投稿しています。
Facebook（友達限定のプライベート投稿で本質的な情報発信中）
