[69-1] canvas要素でグラフィックスを表示する領域を作ろう

<canvas>要素は、グラフィックスを表示する領域を作る要素です。
これもHTML5からの新要素です。

専用のJavaScript（Canvas API ）を使って、<canvas>要素内に図形を描いてそれを変形・装飾したり、ビットマップ画像のピクセル操作をしたり、アニメーションを作ったりできます。この仕様を Canvas と言います。
というわけで、<canvas>要素は、Canvas を表示する領域を作る要素です。

HTML上でグラフなどの図形を表示するには、画像ファイル（jpegとかpngとか）を別に用意する必要がありました。これを、外部ファイルやプラグインなどを使わずに、HTML上に直に書けるよう作られた仕様が Canvas です。

<canvas>要素は、<img>要素と違って「終了タグ」があります。
<canvas>〜</canvas>の間に、Canvasに未対応の古いブラウザ向けに代替えコンテンツを入れることができます。

使用する要素	<canvas> 〜 </canvas>

<canvas>の属性	width
	height
	グローバル属性

<canvas>要素そのものは すごく単純で、専用の属性は、縦横のサイズを決める width、height属性の2つです。 （サイズは CSS や JavaScript での指定も可）

あとは <canvas>要素に id属性で名前を付けるだけ。
JavaScriptによる描画を書き出す場所と指定します。

<script>
  // canvas要素の id を指定して、描画用のスクリプトを書きます
  // この部分は、次回以降の記事で基本を説明します
</script>

<canvas id="canvas1" width="400" height="200">
  <!--↓代替えコンテンツを入れることもできます-->
  <p>お使いのブラウザはcanvas要素に対応していません</p>
</canvas>

実際の描画は JavaScript を使うので、Canvasを使う = JavaScript を使う ということになります。
JavaScript が得意でないと、ちょっと敷居が高いですが、Canvasのために用意されたスクリプトをある程度覚えれば、そこそこのことはできるはず。ですので勉強して行こうと思います。

Canvasで何ができるか見てみよう！

実際に Canvasを使ったサイトを探してみました。
（クリックで別ウィンドウで開きます）

WRASS NETWORK

トップメッセージ部分の背景に Canvasでラインアニメーションが描かれています。

株式会社キュー

ビジターが赤ペンで丸などを描くと、中に動画が現れます。
Canvasの実装は株式会社カヤックさんが担当されたそうで、その紹介がこちらに載っています↓
面白法人カヤックが伝授！Canvasで「一度見たら忘れられない」Webサイトをつくる5つのワザ｜ヒカ☆ラボレポート

jsdo.it

jsdo.it は、JavaScriptを中心にコードの共有など交流ができるサイト。
タグ canvas を選ぶと、色んな人が作った Canvasのサンプルを見ることができます。

上記のようなことができるようになるための第一歩は、やはり基礎。
この「ほんっとに...」では、基本的なこと（図形を描く、画像を読み込んでピクセル操作するなど）をサンプルを作りながら理解し、記事にしていこうと思います。

次回予告

次回からは実際に Canvasで描画していきます。

次回はまず、四角形、三角形、円弧などの基本的な図形を描いてみます。
応用で円グラフも作ってみます。